React Router v4多ReactDOM.render实例共享History问题求助

这个问题的核心在于你现在的两个React实例各自使用了独立的history对象：第一个用BrowserRouter时它会内部自动创建一个history，第二个又手动调用createBrowserHistory生成了新的，自然没法同步。要实现共享，只需要让两个实例使用同一个history实例就行，具体步骤如下：

1. 创建全局共享的history实例 #

新建一个单独的history.js文件，导出我们创建的history对象：

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

2. 修改第一个ReactDOM.render的路由配置 #

把原来的BrowserRouter换成Router组件，并传入我们刚才创建的共享history：

// index.js 里修改路由部分
import { Router } from 'react-router-dom'; // 替换BrowserRouter为Router
import history from './history'; // 导入共享的history

ReactDOM.render(
  <Provider store={store}>
    <AppContextProvider>
      <Router history={history}> {/* 用Router替代BrowserRouter，传入共享history */}
        <App />
      </Router>
    </AppContextProvider>
  </Provider>,
  document.getElementById('root')
);

3. 修改第二个ReactDOM.render的路由配置 #

不要重新创建history，而是导入同一个共享的history实例：

// Map.js 里修改
import { Router } from 'react-router-dom';
import history from './history'; // 导入同一个history
import store from './store'; // 确保这里的store和index.js是同一个实例

const popUpHTML = (
  <Provider store={store}>
    <Router history={history}> {/* 使用共享的history */}
      <PopUpClick name={name} img={img} id={id} />
    </Router>
  </Provider>
);

为什么这样可行？ #

BrowserRouter是React Router提供的高层封装组件，它会在内部自动创建一个createBrowserHistory实例并维护。而Router组件则允许我们手动传入自定义的history对象，这样两个React应用实例就共用了同一个history栈，路由跳转、URL变更、回退操作都会同步生效。

另外要注意，两个实例必须使用同一个Redux store（你代码里已经在传递store，只要保证导入的是同一个实例就没问题），这样路由相关的状态（如果有的话）也能保持一致。

内容的提问来源于stack exchange，提问作者Milan Djekic