React router with redux not working after updrage to 5.0.0

[hamzaboularbah]

Hello,
Im trying to setup a react redux boilerplate that uses the react router with redux and connected-react-router and rely on the createBrowserHistory api from the history package. everything was working fine, until i made the upgrade to 5.0.0 for it then it stopped working throwing the following error in the console when i click on a <Link />
Uncaught Could not find router reducer in state tree, it must be mounted under "router"
PS : I'm already mounting the router reducer in my root reducer.

https://www.loom.com/share/d956b05939af4fada2ec891ae56c8853

[gerardo15]

Im also having this problem!

[emish89]

yes, me too with connected-react-router and redux after the upgrade from history 4 to 5

[Sen9a]

Hello guys.
After the update, my component doesn't render JSX when I am redirecting to it and doesn't throw any errors.
Thank you in advance.

[ApacheEx]

the same here - I see white-screen without any errors when call

history.replace({ search: '?whatever=1' });

Issue appears after upgrading to v5

[readikus]

Documentation for migrating from 4 -> 5 would be helpful.

[saadbinsaeed]

history.push() stopped working after upgrading from v4 to v5

[readikus]

I'm still working through the issues with this, but the thing that jumps out is that the location objects being passed around take on different forms:

For example:

{
  hash: "",
  key: "6amvxt1u",
  pathname: "/foo",
  search: "",
  state: null
}

Then,

{
  action: "REPLACE"
  location: {
    hash: "",
    key: "hh38yy0c",
    pathname: "/bar",
    search: "",
    state: null
  }
}

[stage88]

EDIT: I am having issues with connected-react-router, sorry I commented in wrong repo, see supasate/connected-react-router#429

I found i am getting a Could not find router reducer in state tree, it must be mounted under "router", i traced it down to the missing action prop on the persisted route object, as @readikus mentioned above.

in selectors.js, there is code looking for it when validating if it is a router:

var isRouter = function isRouter(value) {
  return value != null && _typeof(value) === 'object' && getIn(value, ['location']) && getIn(value, ['action']);
};

[avindra]

You probably have to update to the react router v6 alpha as well, as the v5 is explicity specifying v4 history in its dependencies. More likely than not, you will have two (conflicting) history deps if you are still using react-router 5.

[joshxyzhimself]

Almost panicked but glad this can be resolved with a temporary downgrade haha.

[jarretmoses]

@avindra I did actually try upgrading the router to v6 before checking here but I am still having the same issues as marked here. But it may be more an issue with connected-react-router. Personally I will wait to upgrade until the package that is causing it becomes more clear.

[vinniimiranda]

Same issue here

[colehart]

Same issue. Like @readikus, I'm noticing the object changing from place to place. On load, the object fulfills v4 / expected redux action / location, but on location change, the location object is being populated with {action: , location: }. Seems like a nesting problem in a v5 functions' return maybe?

[DLesage25]

Same issue here. Downgrading to 4.10.1 fixes the issue.

[tianleiyiji123]

Documentation for version 5 can be found in the docs directory. This is the current stable release. Version 5 is used in React Router version 6.

Documentation for version 4 can be found on the v4 branch. Version 4 is used in React Router versions 4 and 5.

[joshxyzhimself]

feels weird that history v5 is at @latest while react-router-dom v6 is at @next

[aarowman]

Are there any updates on this issue? I am still using 4.10.1 because history.push does not work on 5.0.1

[StringEpsilon]

@aarowman:
5.0.0 is a rewrite and not intended to be compatible with 4.x. See the release notes and #811.

connected-react-router will have to make changes in order to be compatible with History 5.x. Also, please note that history 5 is not compatible with react-router-dom version 5 either. If you want to use history 5, you have to use react-router-dom in version 6, which is currently in beta.