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>

Answer 1

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

Answer 2

changed the code in reducers reducers.js

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