I get this error when in the HOME of my App I try to go to another page from the sidebar menu.
Could not find router reducer in state tree, it must be mounted under "router"
in my console I notice the loggers are messed up:
When I click to visit a different page this is the router structure I get in the next page:
as you can see it's incorrect cause the first action is undefined and location is an object with contains action and location. the correct structure should be this one:
This is my reducer.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
const createRootReducer = (history) =>
combineReducers({
router: connectRouter(history),
});
export default createRootReducer;
and this is my store.js:
import { routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import { applyMiddleware, compose, createStore } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import createRootReducer from "./reducers";
import env from '../assets/env/development';
export const history = createBrowserHistory();
function saveToSessionStorage(state) {
try {
const serializedState = JSON.stringify(state);
sessionStorage.setItem("reduxState", serializedState);
} catch (e) {
console.log(e);
}
}
function loadFromSessionStorage() {
try {
const serializedState = sessionStorage.getItem("reduxState");
if (serializedState) {
return JSON.parse(serializedState);
} else {
return undefined;
}
} catch (e) {
console.log(e);
return undefined;
}
}
const logger = createLogger({
timestamp: true,
});
const persistedState = loadFromSessionStorage();
let middlewares = {
apply: null,
plain: null,
};
if (env.VITE_enviroment === "DEV") {
middlewares.apply = applyMiddleware(logger, thunk);
middlewares.plain = [logger, thunk];
} else {
middlewares = applyMiddleware(thunk);
middlewares.plain = [thunk];
}
//dev tools
const composeEnhancers = () => {
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
return window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(middlewares.apply);
} else {
return compose(
applyMiddleware(
routerMiddleware(history), // for dispatching history actions
...middlewares.plain
// ... other middlewares ...
)
);
}
};
const store = createStore(
createRootReducer(history),
persistedState,
composeEnhancers()
);
store.subscribe(() => {
saveToSessionStorage(store.getState());
});
export default store;
and this is my main.tsx (I didn't copy the imports, but they're correct)
function Root() {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Router history={history}>
<HOC_ConfigProvider>
<App />
</HOC_ConfigProvider>
</Router>
</ConnectedRouter>
</Provider>
);
}
ReactDOM.render(<Root />, document.getElementById('root'));
Ireally don't knwo why I get this problem since I haven't touched the app is days and the last time everything worked. I thought maybe it was some npm packages so I checked, but the versions should be compatible. Anyway I also copied the dependencies here ( I cannot install the latest version of React, that's a client requisite):
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@antv/data-set": "^0.11.8",
"@antv/g2": "^4.1.30",
"antd": "^4.20.7",
"axios": "^0.21.1",
"bootstrap-italia": "1.4.3",
"connected-react-router": "^5.0.1",
"design-react-kit": "3.3.3",
"grunt": "^1.3.0",
"grunt-bump": "^0.8.0",
"history": "^5.3.0",
"less": "^4.2.0",
"moment": "^2.29.1",
"prop-types": "15.7.2",
"react": "17.0.1",
"react-app-polyfill": "^2.0.0",
"react-color": "^2.19.3",
"react-dom": "17.0.1",
"react-helmet": "^6.1.0",
"react-highlight-words": "^0.17.0",
"react-lazylog": "^4.5.3",
"react-redux": "7.2.2",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"reactcss": "^1.2.3",
"redux": "4.0.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"sass": "^1.80.6",
"typeface-lora": "1.1.13",
"typeface-roboto-mono": "1.1.13",
"typeface-titillium-web": "1.1.13",
"xlsx": "^0.17.0"
},
"devDependencies": {
"@babel/core": "^7.26.8",
"@babel/plugin-transform-runtime": "^7.25.9",
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@types/node": "^18.14.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-redux": "^7.1.34",
"@types/react-router": "^5.1.20",
"@vitejs/plugin-react": "^4.3.3",
"babel-jest": "^29.7.0",
"chai": "^5.1.2",
"eslint": "^9.15.0",
"faker": "^5.5.3",
"globals": "^15.11.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"redux-mock-store": "^1.5.5",
"ts-jest": "^29.2.5",
"typescript": "^5.7.2",
"typescript-eslint": "^8.11.0",
"vite": "^5.4.10"
},
What can I check? I think I've checked every possible place where there could be an error.
Thank you
I get this error when in the HOME of my App I try to go to another page from the sidebar menu.
Could not find router reducer in state tree, it must be mounted under "router"
in my console I notice the loggers are messed up:
When I click to visit a different page this is the router structure I get in the next page:
as you can see it's incorrect cause the first action is undefined and location is an object with contains action and location. the correct structure should be this one:
This is my reducer.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
const createRootReducer = (history) =>
combineReducers({
router: connectRouter(history),
});
export default createRootReducer;
and this is my store.js:
import { routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import { applyMiddleware, compose, createStore } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import createRootReducer from "./reducers";
import env from '../assets/env/development';
export const history = createBrowserHistory();
function saveToSessionStorage(state) {
try {
const serializedState = JSON.stringify(state);
sessionStorage.setItem("reduxState", serializedState);
} catch (e) {
console.log(e);
}
}
function loadFromSessionStorage() {
try {
const serializedState = sessionStorage.getItem("reduxState");
if (serializedState) {
return JSON.parse(serializedState);
} else {
return undefined;
}
} catch (e) {
console.log(e);
return undefined;
}
}
const logger = createLogger({
timestamp: true,
});
const persistedState = loadFromSessionStorage();
let middlewares = {
apply: null,
plain: null,
};
if (env.VITE_enviroment === "DEV") {
middlewares.apply = applyMiddleware(logger, thunk);
middlewares.plain = [logger, thunk];
} else {
middlewares = applyMiddleware(thunk);
middlewares.plain = [thunk];
}
//dev tools
const composeEnhancers = () => {
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
return window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(middlewares.apply);
} else {
return compose(
applyMiddleware(
routerMiddleware(history), // for dispatching history actions
...middlewares.plain
// ... other middlewares ...
)
);
}
};
const store = createStore(
createRootReducer(history),
persistedState,
composeEnhancers()
);
store.subscribe(() => {
saveToSessionStorage(store.getState());
});
export default store;
and this is my main.tsx (I didn't copy the imports, but they're correct)
function Root() {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Router history={history}>
<HOC_ConfigProvider>
<App />
</HOC_ConfigProvider>
</Router>
</ConnectedRouter>
</Provider>
);
}
ReactDOM.render(<Root />, document.getElementById('root'));
Ireally don't knwo why I get this problem since I haven't touched the app is days and the last time everything worked. I thought maybe it was some npm packages so I checked, but the versions should be compatible. Anyway I also copied the dependencies here ( I cannot install the latest version of React, that's a client requisite):
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@antv/data-set": "^0.11.8",
"@antv/g2": "^4.1.30",
"antd": "^4.20.7",
"axios": "^0.21.1",
"bootstrap-italia": "1.4.3",
"connected-react-router": "^5.0.1",
"design-react-kit": "3.3.3",
"grunt": "^1.3.0",
"grunt-bump": "^0.8.0",
"history": "^5.3.0",
"less": "^4.2.0",
"moment": "^2.29.1",
"prop-types": "15.7.2",
"react": "17.0.1",
"react-app-polyfill": "^2.0.0",
"react-color": "^2.19.3",
"react-dom": "17.0.1",
"react-helmet": "^6.1.0",
"react-highlight-words": "^0.17.0",
"react-lazylog": "^4.5.3",
"react-redux": "7.2.2",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"reactcss": "^1.2.3",
"redux": "4.0.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"sass": "^1.80.6",
"typeface-lora": "1.1.13",
"typeface-roboto-mono": "1.1.13",
"typeface-titillium-web": "1.1.13",
"xlsx": "^0.17.0"
},
"devDependencies": {
"@babel/core": "^7.26.8",
"@babel/plugin-transform-runtime": "^7.25.9",
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@types/node": "^18.14.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-redux": "^7.1.34",
"@types/react-router": "^5.1.20",
"@vitejs/plugin-react": "^4.3.3",
"babel-jest": "^29.7.0",
"chai": "^5.1.2",
"eslint": "^9.15.0",
"faker": "^5.5.3",
"globals": "^15.11.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"redux-mock-store": "^1.5.5",
"ts-jest": "^29.2.5",
"typescript": "^5.7.2",
"typescript-eslint": "^8.11.0",
"vite": "^5.4.10"
},
What can I check? I think I've checked every possible place where there could be an error.
Thank you
Share Improve this question edited Feb 18 at 3:52 Drew Reese 203k17 gold badges237 silver badges268 bronze badges asked Feb 17 at 15:57 Maria ScettaMaria Scetta 712 silver badges7 bronze badges 1- I don't see any overt issues in the code you shared. Can you create a running CodeSandbox demo that reproduces the issue that readers could inspect live? – Drew Reese Commented Feb 18 at 3:52
1 Answer
Reset to default 0Ok, I found the cause. Someone installed on the project history v5, but it is not compatible with connected-react-router v6 so I installed history v4 and not it works.
put in the terminal this:
npm install [email protected]
and it will work