React+Router+Redux应用中iframe路由修改触发父页面路由变更问题问询

嘿，这个问题我之前踩过坑！本质上是因为你的iframe和父页面共享了路由上下文或者状态容器，导致iframe的路由操作“串”到父页面去了。下面我给你详细说下原因和可行的解决方案：

为什么会出现这个问题？ #

当你在同域的iframe里运行同一个React应用时，如果没做特殊配置：

• React Router默认会使用当前环境的window.history，如果不小心引用了父页面的window（比如用了window.top），就会直接操作父页面的路由；
• 要是你的Redux Store是全局挂载的（比如挂在window上），iframe里的路由状态变更会同步到父页面的Store，进而触发父页面的路由更新。

具体解决办法 #

1. 给iframe创建独立的History实例 #

别用默认的BrowserRouter了，手动给iframe生成专属的History，绑定到它自己的window上：

// 这是iframe的入口文件代码
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';
import App from './App';

// 明确指定用iframe自身的window来创建history，彻底和父页面隔离
const iframeHistory = createBrowserHistory({
  window: window.self
});

// 用自定义Router代替BrowserRouter，传入专属history
ReactDOM.render(
  <Router history={iframeHistory}>
    <App />
  </Router>,
  document.getElementById('iframe-root')
);

这样iframe里的路由操作就只会作用于自身的history栈，再也不会影响父页面了。

2. 隔离Redux Store（如果用了全局共享的Store） #

如果你之前为了方便把Redux Store挂在全局window对象上，那iframe和父页面会共用同一个Store，路由状态自然会同步。这时候要给iframe单独建一个Store：

// 同样在iframe的入口文件
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import { Router } from 'react-router-dom';
import App from './App';

// 生成iframe专属的Store
const iframeStore = createStore(rootReducer);
const iframeHistory = createBrowserHistory({ window: window.self });

ReactDOM.render(
  <Provider store={iframeStore}>
    <Router history={iframeHistory}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('iframe-root')
);

3. 检查代码中的全局引用 #

确保你的iframe代码里没有不小心用到window.top或者window.parent来获取路由、Store这类对象，所有操作都基于iframe自身的window（也就是直接用window或者window.self）。

额外提醒 #

• 如果你用的是React Router v6，Router组件的用法和v5差不多，核心还是传入独立的history实例；
• 同域iframe之间的上下文很容易串，一定要把路由、状态这类核心模块都做隔离，避免类似的问题。

内容的提问来源于stack exchange，提问作者Tzook Bar Noy