React Admin搭配外部Redux Provider出现Missing history prop报错求简易解法

方案一：最小改动适配（无需调整现有路由结构） #

这个方案只需要新增3处小修改，不需要调整你现有Redux配置，也不需要引入redux-saga：

1. 安装history依赖（如果项目中还未单独安装）

npm install history

2. 新建统一的history实例文件src/history.js

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

3. 修改入口文件中的Router配置，改用你自己创建的history实例

import history from './history';

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <App />
        </Router>
    </Provider>,
    document.getElementById("root")
);

4. 找到你项目中使用<Admin>组件的位置，传入同一个history实例即可

import history from './history';

// 原有Admin配置仅新增history属性即可
<Admin 
  history={history}
  dataProvider={yourDataProvider}
  // 保留你原来的其他Admin配置
>
  {/* 原有资源配置不变 */}
</Admin>

方案二：完全隔离Redux上下文（无需修改React Admin任何配置） #

如果你希望React Admin完全使用自己内部的Redux store，和你业务的Redux完全不产生关联，可以直接拆分路由上下文，不让React Admin获取到外层的自定义Redux Provider：

// App.js 示例代码
import { Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './yourStorePath';
import YourBusinessApp from './YourBusinessApp';
import AdminApp from './AdminApp'; // 封装了<Admin>的组件

function App() {
  return (
    <Routes>
      {/* 非管理后台的业务路由，包裹自定义Redux Provider */}
      <Route path="/*" element={
        <Provider store={store}>
          <YourBusinessApp />
        </Provider>
      } />
      {/* 管理后台路由，不包裹自定义Provider，React Admin会自动创建内部store */}
      <Route path="/admin/*" element={<AdminApp />} />
    </Routes>
  );
}

这个方案不需要修改任何React Admin的配置，也不需要额外传history属性，两个Redux store完全独立互不影响，更符合你「自定义Redux仅用于非React Admin部分」的需求。

两个方案都不需要配置redux-saga，也不需要修改你现有业务的Redux逻辑，可以根据自己的项目结构选择。

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