connectedRouter Error: Could not find router reducer in state tree, it must be mounted under “router”

问题

I am new to React.js and was setting up base project at that I was getting one issue that my routing got changed but component doesn't load. After googling I found that I need to use ConnectedRouter. While setting up ConnectedRouter, I am getting console error: Could not find router reducer in state tree, it must be mounted under "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'));

回答1:

Add router in your reducer with using connectRouter and history

Refer this link

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

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

回答2:

In my case I was using history version 5.0.0, I decreased it to version 4.10.1, it works fine.

ReactTraining/history#804

回答3:

You have forgotten :

router: connectRouter(history),

in your combineReducers()

回答4:

[Solved] Downgrade history package to 4.10.1

For the sake of helping future souls with this issue, it turns out that according to the linked GitHub discussions, that version 5.0 of the history package is causing the issue and downgrading to version 4.10.1 solves the problem for me.

npm install history@4.10.1

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

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

The original answer from this post: "Could not find router reducer" error when using connected-react-router

回答5:

If you use immutable you should import ConnectedRouter from 'connected-react-router/immutable'.

回答6:

I ran into the same issue. I forgot to give the history as a parameter to my rootReducer, in my store initialization.

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

来源：https://stackoverflow.com/questions/54315988/connectedrouter-error-could-not-find-router-reducer-in-state-tree-it-must-be-m

标签

reactjs

react-redux

react-router