How to fix error: Could not find router reducer in state tree, it must be mounted under "router"

Viewed 1795

I got - Error: Could not find router reducer in state tree, it must be mounted under "router".

I've read all the similar topics. Tryed different variants, but can't find solution. I still don't have enough knowledge to understand the subject. Plz help to fix this error if you know how.

index.js

import { render } from 'react-dom';
import { Provider, ReactReduxContext } from 'react-redux';
import React from 'react';
import { store, history} from './store';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import App from './components/App/App';

render(
    <Provider store={store}>
        <ConnectedRouter history={history} context={ReactReduxContext}>
            <Switch>
                <Route path="/" component={App} />
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);

part of reducers.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

export default combineReducers({
    router: routerReducer
});

store.js

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { routerMiddleware } from 'react-router-redux'
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();
const getMiddleware = () => applyMiddleware(
    routerMiddleware(history), promiseMiddleware, localStorageMiddleware, createLogger()
);

export const store = createStore(
    reducer,
    getMiddleware(),
);

tryed do like this: in store.js

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';

export const history = createBrowserHistory();
const myRouterMiddleware = routerMiddleware(history);

const getMiddleware = () => applyMiddleware(
    myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger()
);

export const store = createStore(
    reducer(history),
    getMiddleware()
);

in reducers.js

import authorization from './authorization';
import mainstate from './mainstate';
import home from './home';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'

export default (history) => combineReducers({
    authorization,
    mainstate,
    home,
    router: connectRouter(history)
});

got the same error :(

2 Answers

There are a couple of issues.

createStore(reducer, getMiddleware()) - the enhancer (middleware) needs to be the third argument, the second argument should be the store's initial state. See the docs here.

Try this instead

createStore(reducer, {}, getMiddleware())

The other 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.

In the Codesandbox you posted in your comment below, changing the following in package.json makes it work

"dependencies": {
  ...
  "history": "^5.0.0", -> "history": "4.10.1",
  ...
}

Lot of solutions out there are pointing at history library version.

The version 5.x of the history package is causing the issues as above.

Could you please try downgrading the history version to 4.10.1 as suggested here

Related