connected-react-router 报You cannot change

Question

问题描述

项目使用react16+react-router4+connected-react-router+react-hot-loader

问题出现的环境背景及自己尝试过哪些方法

路由层级为

• App.jsx

  • home
  • test-page

home 页面中有一个 Link 组件点击后正常可以跳转到 test-page 页

本地开发时，更改 home 页面的的代码后 热更新生效 页面变化后 控制台报错

    You cannot change <Router history>

报错后 我再去点击 Link 此时url中路由地址发生改变 但页面无法跳转到 test-page

但如果我更改最顶级 App.jsx 页面中的代码 就不会发生此问题

相关代码

import { Route, BrowserRouter } from 'react-router-dom';
// 不使用 ConnectedRouter 的情况下可以恢复正常
// import { ConnectedRouter } from 'connected-react-router';
import App from './App';

const propTypes = {
  history: PropTypes.object.isRequired,
};

const Router = ({ history }) => (
{// <ConnectedRouter history={history}>}
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>
);

我将 ConnectedRouter 替换为 react-router-dom 中的 BrowserRouter 问题解决了 但是我就无法使用 connected-react-router 提供的功能了 请问此问题是 connected-react-router 造成的吗

App.jsx

render() {
    return (
      <div className="app-warp">
        <h2>Hello!</h2>
        <Switch>
          {map(routerList, (route, idx) => (
            <Route key={idx} {...route} />
          ))}
          <Route path="*" component={NotFound} />
        </Switch>
      </div>
    );
  }