Could not find router reducer in state tree, it must be mounted under "router"

Question

I am using these versions

"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-router-dom": "^5.2.0"
"connected-react-router": "^6.8.0"
"history": "4.10.1"

export const browserHistory = createBrowserHistory({ basename: '/clearance-authorization' })

i am getting this Error Could not find router reducer in state tree, it must be mounted under "router"

reducers.js

export default (history) => {
const appReducer = (asyncReducer) => {
  return combineReducers({
    notifications,
    router: connectRouter(history),
    ...asyncReducer
  })
}
const rootReducer = (state, action) => appReducer(state, action)
return rootReducer
}

store.js

import { createBrowserHistory } from 'history'
export const history = createBrowserHistory({
  basename: '/clearance'
})
const middleware = [routerMiddleware(history), sagaMiddleware, notifications]

const configureStore = (initialState) => {
  const store = createStore(
    createReducer(history),
    initialState,
    compose(
      applyMiddleware(...middleware),
      getReduxDevTools(process.env.NODE_ENV === 'development')
    )
  )
  store.asyncReducers = {}
  store.runSaga = sagaMiddleware.run
  store.close = () => store.dispatch(END)
  return store
    }

export default configureStore

App.js

import configureStore, { history } from './redux/store'
import { ConnectedRouter } from 'connected-react-router'

  <Provider store={store}>
      <ConnectedRouter history={history}>
        <Frame handleScrolling={false}>
         </Frame>
      </ConnectedRouter>
    </Provider>

What is `createReducer` that is used in the `createStore` function? — Drew Reese, Apr 28 '22 at 07:02
import createReducer from './reducers' => createReducer is the appReducer — C09-G, Apr 28 '22 at 07:54
I see. Then it appears `appReducer` is passed a history object but renames it `asyncReducer` and something else is passed to `connectRouter`. — Drew Reese, Apr 28 '22 at 07:58
my bad, some code missed now you can see history is being passed — C09-G, Apr 28 '22 at 08:04
That create reducer function doesn't seem quite correct. What is `asyncReducer`? It looks like it's the `state` object from `const rootReducer = (state, action) => appReducer(state, action)`. — Drew Reese, Apr 28 '22 at 08:14
hey thank you Drew , i got it i have removed rootReducer and only returned the combineReducers — C09-G, Apr 29 '22 at 06:45

score 0 · Answer 1 · answered Apr 28 '22 at 04:49

Issue

From your description and error it seems you've not added the connected router to your root reducer.

Solution

Import connectRouter function and create the root reducer with a router key and pass the history object. Redux doesn't have a matching reducer, or specifically the connected-react-router selectors are attempting to select from non-existent state.

Example from docs:

In your root reducer file,
Create a function that takes history as an argument and returns a root reducer.

Add router reducer into root reducer by passing history to connectRouter.
Note: The key MUST be router.
// reducers.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
... // res of your reducers

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers
});

export default createRootReducer;

...

Import your history object and custom createRootReducer for use when creating your Redux store. Follow the rest of the connected-react-router docs for specifics.

Example:

import { browserHistory } from '../path/to/history';
import createRootReducer from './reducers';

...

createRootReducer(browserHistory);

i am passing the history to createRootReduce, and also added the **router: connectRouter(history)** still its same — C09-G, Apr 28 '22 at 05:21
@C09-G Please share all the relevant code you're working with, it's hard to debug code we can't see. https://stackoverflow.com/help/minimal-reproducible-example — Drew Reese, Apr 28 '22 at 05:24

score 0 · Answer 2 · answered Apr 29 '22 at 06:46

0

changed the code in reducers reducers.js

export default (history) => {
  return combineReducers({
    notifications,
    referenceData,
    clearance,
    lotNotes,
    siteTour,
    buyerNotes,
    router: connectRouter(history)
  })
}

answered Apr 29 '22 at 06:46

C09-G

21
4

Could not find router reducer in state tree, it must be mounted under "router"

2 Answers2

Issue

Solution