求Admin-on-rest集成HMR（热模块替换）的可用示例及路由报错解决方案

我之前也遇到过这个问题，结合Admin-on-rest（现在已更名为react-admin，但旧版本的适配思路完全一致）和HMR时，这个Warning: You cannot change <Router history>的警告确实很常见。下面是我验证过的可行方案和解决思路：

问题原因分析 #

Admin-on-rest的<Admin>组件内部已经封装了react-router的Router实例（默认是BrowserRouter），当HMR触发组件热更新时，如果我们的代码每次都创建新的history对象，或者重新渲染时导致Router实例的history属性发生变化，就会触发这个警告——react-router不允许在已挂载的Router上修改history对象。

核心解决思路 #

1. 复用同一个history实例：把history对象抽离成独立模块，确保HMR更新时不会重新创建新的history实例
2. 正确配置React热加载：使用react-hot-loader的AppContainer包裹根组件，避免热更新时完全卸载/重新挂载整个Admin组件树
3. 不要嵌套Router：不要在<Admin>组件外层额外添加Router，因为Admin内部已经自带了Router实例

完整示例代码 #

1. 单独创建history模块 #

创建src/history.js，导出一个全局复用的history实例：

// src/history.js
import { createBrowserHistory } from 'history';

// 这里根据你的需求选择createBrowserHistory或createHashHistory
export default createBrowserHistory();

2. 编写Admin主组件 #

在src/App.js中，将上面的history实例传入<Admin>组件：

// src/App.js
import React from 'react';
import { Admin, Resource } from 'admin-on-rest';
// 替换成你自己的资源组件
import { PostList, PostEdit, PostCreate } from './posts';
import history from './history';

const App = () => (
    <Admin history={history}>
        <Resource 
            name="posts" 
            list={PostList} 
            edit={PostEdit} 
            create={PostCreate} 
        />
    </Admin>
);

export default App;

3. 配置HMR入口文件 #

修改src/index.js，用AppContainer包裹组件，并正确处理热更新：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';

// 封装渲染函数，方便热更新时复用
const renderApp = (Component) => {
    ReactDOM.render(
        <AppContainer>
            <Component />
        </AppContainer>,
        document.getElementById('root')
    );
};

// 首次渲染
renderApp(App);

// 处理HMR热更新
if (module.hot) {
    module.hot.accept('./App', () => {
        // 热更新时重新引入最新的App组件
        const UpdatedApp = require('./App').default;
        renderApp(UpdatedApp);
    });
}

4. Webpack配置要点 #

确保你的webpack配置中包含以下关键设置：

• 安装依赖：npm install react-hot-loader history webpack-dev-server --save-dev
• Babel配置中添加react-hot-loader/babel插件（在.babelrc或babel-loader配置里）：

  {
    "presets": ["react"],
    "plugins": ["react-hot-loader/babel"]
  }
  

• Webpack入口添加react-hot-loader/patch：

  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ]
  

• DevServer开启热模式：

  devServer: {
    hot: true,
    open: true
  }
  

额外注意事项 #

• 如果你使用的是Admin-on-rest的旧版本，确保history包的版本兼容（建议使用history@4.x，因为AOR旧版本依赖react-router@4.x）
• 不要尝试在<Admin>外层嵌套<BrowserRouter>或<HashRouter>，这会导致多个Router实例冲突
• 如果热更新时仍然出现问题，可以尝试在module.hot.accept中清空缓存，但一般情况下上面的方案已经足够解决问题

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