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

Posted 2021-04-16

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

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'));

答案

使用connectRouter和history在reducer中添加路由器

请参阅此链接

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

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

另一答案

你忘记了：

router: connectRouter(history), 

另一答案

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

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

另一答案

没有使用“connected-react-router”：“^ 6.3.1”，是否有人从v5.x迁移

import languageProviderReducer from '../components/language/reducer';
import { combineReducers } from 'redux-immutable';
import { connectRouter } from 'connected-react-router';
import { history } from './configureStore';

const rootReducer = (injectedReducers = {}) =>
  combineReducers({
    language: languageProviderReducer,
    router: connectRouter(history),
    ...injectedReducers
  });

export default rootReducer;

另一答案

你需要像这样添加路由器reducer：

import { push, routerReducer } from 'react-router-redux'

const rootReducer = combineReducers({
    login: loginReducer,
    router: routerReducer
});

我还建议您使用另一个路由库，如react-router with redux integration或connected-react-router，因为react-router-redux已被弃用，并且不及最新版本的react-router。

以上是关于connectedRouter错误：在状态树中找不到路由器reducer，它必须安装在“router”下的主要内容，如果未能解决你的问题，请参考以下文章

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

maven-shade-plugin 错误：在“资源”的 org.apache.maven.plugins.shade.resource.ManifestResourceTransformer 中找不

MinGW gcc 在 /local/include 中找不到头文件

在 Visual Studio 项目目录中找不到头文件

Xcode Archive 在子项目中找不到头文件

脑洞题目 - 改自从一组无序数组中找不存在的最小正整数