2

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 :(

Will Black
  • 350
  • 2
  • 17

2 Answers2

3

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",
  ...
}
davnicwil
  • 28,487
  • 16
  • 107
  • 123
  • thank you! tried to do correct imports from 'connected-react-router', but still same error. I added more code from my reducers.js and store.js files may be it shows where I got the error. – Will Black Aug 03 '20 at 12:08
  • Ah, wait, I think I spotted the potential issue :-) will update answer – davnicwil Aug 03 '20 at 12:21
  • 1
    done it ```createStore(reducer, {}, getMiddleware())``` but nothing changed, i made copy on codesandbox - https://codesandbox.io/s/nifty-silence-t11h6?file=/src/index.js its not working project, and got a lot to do, but im total stuck at this error :/ – Will Black Aug 03 '20 at 13:30
  • 1
    Got it - it's a versioning issue with `history` and `react-router-dom`. Answer updated. – davnicwil Aug 03 '20 at 14:10
2

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

Prathap Reddy
  • 1,688
  • 2
  • 6
  • 18