39

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

6 Answers6

111

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

noblerare
  • 10,277
  • 23
  • 78
  • 140
  • 4
    Absolute legend! I've started working on a fresh project. Been trying to figure why exact same code from older projects wouldn't work with this one. Thanks a lot for ending this miserable debugging session of mine! – iGoodie Sep 20 '20 at 03:31
  • 1
    thanks alot, also i need to append this if you are using docker , restart the container in case of downgrade :))) – amdev Sep 21 '20 at 16:58
  • 2
    Thank you! Would never have found this in a zillion years. – HAS-Jack Oct 09 '20 at 13:41
  • So grateful for this answer. I was beginning to think I needed to remove redux from my app in order to fix. – dwoodwardgb Apr 23 '21 at 21:33
  • Gosh, I wish I stumbled upon this answer earlier... THANK YOU! Here, take my upvote! – tomijovanoski May 24 '21 at 21:40
20

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),
});
Nikhil Mahirrao
  • 3,547
  • 1
  • 25
  • 20
20

The main issue is the version of the history package, with react-router-dom v5 you need to use history v4 (the latest version of which is 4.10.1) - history v5 is only compatible with react-router-dom v6.

Volodymyr Dashko
  • 201
  • 2
  • 2
7

You have forgotten : 

router: connectRouter(history),

in your combineReducers()

Tiavina MIchael
  • 111
  • 2
  • 5
5

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

Alexander Elgin
  • 6,796
  • 4
  • 40
  • 50
0

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
  {},
  ...
)
FabienChn
  • 938
  • 10
  • 17