Javascript 如何更改React中的路由以响应窗口消息事件？

我有一个React应用程序，打算嵌入到另一个非React应用程序中。它位于主应用程序页面上的iframe中。react应用程序在react应用程序中使用react路由器（5.0.0）和react路由器dom（5.1.0），当有人单击导航链接时，我会触发：

window.parent.postMessage(window.location.pathname,"*");

iframe.contentWindow.postMessage(new_url, '*');

这样我就可以使父网站的url路径与iframe的url路径匹配。我还绑定到父窗口的onpopstate事件中，以便在单击浏览器的后退按钮时捕获该按钮，然后触发：

window.parent.postMessage(window.location.pathname,"*");

iframe.contentWindow.postMessage(new_url, '*');

这里的想法是，在React应用程序中，我将侦听此消息，然后在单击“后退”按钮时手动路由到正确的位置，以保持父帧和iframe同步

我已经验证了，当我使用后退按钮时，我确实在iframe中获得了消息，但是我不知道触发此重新路由的最佳方法。现在，我将事件侦听器放入根元素，如下所示：

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { push } from 'react-router-redux';
import Wizard from '../Wizards';

const Root = (props) => {
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen to message from child window
  eventer(messageEvent,function(e) {
    console.log(e);
    console.log('props');

    console.log(props);
    //props.store.dispatch(push('/broadcast_wizard/step1'));
    //Router.push('/broadcast_wizard/step1');
    //this.context.history.push('/broadcast_wizard/step1');
    console.log('why?');

  },false);

  return (
    <Provider store={props.store}>
      <Router>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"/>
        <Switch>
          <Route path="/broadcast_wizard/:step" component={Wizard} />
          <Route path="/:filter?">
            Root page
          </Route>
        </Switch>
      </Router>
    </Provider>
  );
};

export default Root;

从“React”导入React；
从'react redux'导入{Provider}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react router redux”导入{push}；
从“../Wizards”导入向导；
常量根=（道具）=>{
var eventMethod=window.addEventListener？“addEventListener”：“attachEvent”；
var eventer=window[eventMethod]；
var messageEvent=eventMethod==“attachEvent”？“onmessage”：“message”；
//收听来自子窗口的消息
事件器（messageEvent，函数（e）{
控制台日志（e）；
console.log（'props'）；
控制台日志（道具）；
//道具存储调度（推送（'/broadcast_wizard/step1'）；
//Router.push（'/broadcast_wizard/step1'）；
//this.context.history.push（'/broadcast_wizard/step1'）；
console.log（'why？'）；
}，假）；
返回(
根页面
);
};
导出默认根目录；

---

在上面的例子中，我已经包括了（注释掉）我迄今为止尝试过但失败的所有事情。请帮助，React新手，但有多年的JavaScript经验。

您是否必须在iframe中呈现React应用程序？您是否已探索将其安装到另一个根元素上？这可能会让事情变得更容易

比如：

ReactDOM.render(
  <App/>,
  document.getElementById('react-root') as HTMLElement
)

ReactDOM.render(
,
document.getElementById（'react-root'）作为HTMLElement
)

如果您只想导航到另一个路径，可以尝试以下操作：

window.location.href='/broadcast\u wizard/step1'

是的，我可以这样做，我想我应该澄清一下，我希望内部页面能够重新路由，而不会出现令人讨厌的完整页面刷新，如果我使用window.location.href=不确定它是否适用于我想到的所有用例。我最初的构建是打算在我们的主网站上的一个页面内，但是在未来，我们设想这也会嵌入到第三方网站中。我对react的了解还不够，还不知道您建议的方法是否适用于该用例。如果您想在iframe中长期努力使其工作，您可以稍后在iframe中的该元素上安装它，但我似乎失败了。window.history对象存在一些我无法克服的固有问题。我希望它出现在iframe中的另一个主要原因是，父页面CSS不会影响它，但如果需要的话，我可以手动覆盖这些页面。