-
Notifications
You must be signed in to change notification settings - Fork 594
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uncaught Could not find router reducer in state tree, it must be mounted under "router" #312
Comments
How does your |
Make sure you have not defined an initial state for
Where |
I had this issue as well, and it was because I was defining an initial router state. The problem is, if you are using TypeScript, the compiler will report an error if your reducer tree and your default state tree don't share the same structure. It's really confusing because unless you already know that this is a problem, you will follow the TS feedback and end up with a runtime error message that is exactly backwards (the issue isn't that the reducer is missing, it's that you are giving it a default state when it doesn't expect one). Most people will probably spend a half hour trying to figure out why the reducer is undefined when it is most definitely being created, then google the error message and end up here. To make it extra awkward, the only way to make the compiler happy is to create a router key in the state tree with the value |
Hi there. I'm having this issue too, and it has been for days to try to solve it. I ended in leaving only the router in the state and try to compile my application. As @parkerault said, it has been very confusing for me because I ended on nosense errors. My approach is to use 'redux-immutable''s My store initialization looks like that:
If I debug this store attaching it to the window, I can see that store is an Immutable map with size == 1 and 2 entries like you can see in this image: Besides this, my approach is to combine more reducers than the router one, and make them immutable aswell using redux-immutable combineReducers. I'm almost there, I could type the other states as Immutable records and easily navigate through them with getters. Without the router, I end in this error reduxjs/redux#2808 . Seems to be merged but not to be updated in the package, since I can still see DeepPartial on Store declaration file. It has been a nightmare for me since days, I need some help or clarifications if I am doing anything wrong. It's a matter of life & death, because is for a test for a new job position, and with this immutable feature surely I can get hired :) Thx to all in advance. |
In deeper analysis of the problem, I found that when you don't import ConnectedRouter specifically from For me, this TS code works. AppRouter.tsx:
configureStore.ts
rootReducer.ts
|
I'm writing a complex application, and the reducers have a complex hierarchy also (using combineReducers), so the router reducer cannot be placed as a root reducer but in a nested reducer (for example: arch.global.router). {
...,
arch: {
...,
global: {
router: connectRouter(history),
...
}
}
} Is there a way to config the library so that the router reducer can be located in a nested reducer inside the resulting global reducer? Thanks in advance. |
I found a solution. The problem related to version incompatibility. I had this error when using connected-react-router 6.8.0 and react-router 5.2.0. I changed it to connected-react-router 6.6.1 and react-router 5.1.2 and that is all. |
No, just lib history update v5.0.0, i decrease verion 4.10.1, it's work ok |
I can confirm that @xuanlongvts fix by downgrading history to Here's the rest of my setup with package dependencies as well. I did delete a couple non-essential styling pieces and the like for brevity. App.js
AppRouter.js
history.js
reducer.js
store.js
package.json The key here is pinning
|
Pinning |
I apparently had the same issue as @stilllife00 and @brianmriley and I can confirm that pinning the version of |
Thanks for sharing this thread, very usefull! |
Any plans to fix this such that connected-react-router will not break if we install history v5? |
Version 5.0.0 of Whereas In fairness to @supasate, the |
I tried it without success |
* react-redux, redux, redux-thunk, axios, react-router-dom, connected-react-router, history, enzyme, enzyme-adapter-react-16 Force react@16, history@4.10.1: refer to [this issue](supasate/connected-react-router#312)
The main 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. |
I faced the same issue: you indeed need to use Here's the condition before the error is thrown in the code: const isRouter = (value) => value != null &&
typeof value === 'object' &&
getIn(value, ['location']) &&
getIn(value, ['action'])
const getRouter = state => {
const router = toJS(getIn(state, ['router']))
if (!isRouter(router)) { throw 'Could not find router reducer in state tree, it must be mounted under "router"' }
return router
} |
I still have the issue, and looking at @brianmriley post the only real difference I see is that people are on react 16 and not 17. Which I have tried switching back to and it is still an issue downgrading to 16 Found issue if running in DockerTurns out it was because I was running the the app in docker and needed to include a PATH for the .bin # Very specific versions
FROM node:14.15.1-alpine3.11 as react-build-stage
# change working directory to the app directory
WORKDIR /var/www
# copy all files in current directory to working directory
COPY package.json /var/www/
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install items needed on alpine linux for npm to install modules correctly
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make python
# install node-gyp -system specific and needs to be installed before modules
RUN npm install --quiet node-gyp -g
# install package.json modules
RUN npm install --silent
# copy all currently made items into /var/www
COPY . /var/www/
# expose this port
EXPOSE 3000
|
changed history package to 4.10.1 version and solved the problem. |
Any word on when it will be safe to upgrade |
It is also important to note that if you use redux-immutable you should import ConnectedRouter from 'connected-react-router/immutable'. |
When i create a store and combine a reducer, but connectRouter returns 0. But in the official example when i run it, it works and connectRouter returns a object.
My code is the same like the official example.
Could somebody can help me? Pls...
The text was updated successfully, but these errors were encountered: