connectedRouter 错误：在状态树中找不到路由器减速器，它必须安装在“路由器”下

Posted 2023-02-21

【中文标题】connectedRouter 错误：在状态树中找不到路由器减速器，它必须安装在“路由器”下

【英文标题】：connectedRouter Error: Could not find router reducer in state tree, it must be mounted under "router"

【发布时间】：2020-10-13 23:05:52

【问题描述】：

我是 React.js 的新手，并且在设置基础项目时遇到了一个问题，即我的路由已更改但组件未加载。谷歌搜索后，我发现我需要使用 ConnectedRouter。在设置 ConnectedRouter 时，我收到控制台错误：在状态树中找不到路由器减速器，它必须安装在“路由器”下

import React from 'react';
import ReactDOM from 'react-dom';
import  BrowserRouter  from 'react-router-dom';
import  ConnectedRouter, connectRouter, routerMiddleware  from "connected-react-router";
import  Provider  from "react-redux";
import  createStore, combineReducers, applyMiddleware, compose  from 'redux';
import createSagaMiddleware from 'redux-saga';
import loginReducer from "./store/reducers/login";
import  watchLogin from "./store/sagas";
import  history  from '../src/shared/history';
import  push  from 'react-router-redux';



import './index.css';
import App from './App';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const rootReducer = combineReducers(
    login: loginReducer
);
const routersMiddleware = routerMiddleware(history)
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, routersMiddleware];

const store = createStore(
    connectRouter(history)(rootReducer),
    ,
    composeEnhancers(applyMiddleware(...middlewares))
);

sagaMiddleware.run(watchLogin);

const app = (
    <Provider  store=store>
        <ConnectedRouter  history=history>
            <App />
        </ConnectedRouter>
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

【参考方案1】：

为了帮助未来的灵魂解决这个问题，事实证明，根据链接的 github 讨论，history 包的 5.0 版本导致了这个问题，降级到 4.10.1 版本为我解决了这个问题.

npm install history@4.10.1

https://github.com/ReactTraining/history/issues/803

https://github.com/ReactTraining/history/issues/804

【讨论】：

绝对传奇！我开始着手一个新项目。一直试图弄清楚为什么旧项目中完全相同的代码不能与这个项目一起使用。非常感谢您结束我这个悲惨的调试会话！

非常感谢，如果您使用的是 docker，我还需要附加这个，在降级的情况下重新启动容器:)))

谢谢！亿万年都不会发现这一点。

非常感谢您的回答。我开始认为我需要从我的应用程序中删除 redux 才能修复。

天哪，我希望我早点偶然发现这个答案......谢谢！来，投我一票！

【参考方案2】：

使用connectRouter和history在你的reducer中添加router

参考这个链接

https://www.npmjs.com/package/connected-react-router

import  connectRouter  from 'connected-react-router'
const rootReducer = combineReducers(
  login: loginReducer,
  router: connectRouter(history),
);

【参考方案3】：

主要问题是history包的版本，react-router-dom v5需要使用history v4（最新版本是4.10.1）——history v5只兼容react-router-dom v6.

【讨论】：

你拯救了我的一天。在这些包中是否有文档说？

【参考方案4】：

你忘记了：

router: connectRouter(history), 

在你的 combineReducers() 中

【参考方案5】：

如果你使用immutable，你应该从'connected-react-router/immutable'导入ConnectedRouter。

【参考方案6】：

我遇到了同样的问题。 在我的商店初始化中，我忘记将历史记录作为参数提供给我的 rootReducer。

const store = createStore(
  rootReducer(history), // <-- HERE
  ,
  ...
)