React router not working after upgrading to v 5

[GaetanoPiazzolla]

Hello, we've upgraded the history version to 5.0.0 without knowing it because it was set to "latest" in package.json.

What we have found is that the url in the browser gets correctly updated using "history.push()" (with both BrowserHistory and HashHistory) but the navigation is not tirggered anymore. Also, using react-router-dom Link component, the path gets built wrong, skipping the first "/" after the base path.

Switching back to 4.10.1 fixed the issues for us.

[duc-gp]

we've recognized same behaviour. url is updated after history.push but navigation is not working anymore with react-router, also no error in the console

[PulkitAgg]

I am facing the same issue. It looks like there is some breaking changes in the newest version "5.0.0" of history package. For now, we can change its version to "4.10.1" which works for me. Use bellow command for change history version npm install history@4.10.1

[zerone2]

same issue. after history v5 Link or history.push() doesn't work anymore SO I downgrade to 4.10.1

[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.

[avindra]

This is probably a duplicate of #803

[codingwithmanny]

@zerone2 you saved my sanity and my hair. Thank you for figuring this out.

Using:

"history": "4.10.1",
"connected-react-router": "6.8.0",
"react-router-dom": "^5.2.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",

Working for me!

[xXFracXx]

PrivateRoutes seem to not work in v5.

[danutzcodrescu]

same thing, we are using hash router and history.push() is no longer working

[ROiPinheiro]

Any news about this??

[kmacute]

So this is the reason why history.push() is not working, im using the version 5. okay got it, removing the history.push() maybe a bad idea on future release. i'll stick to version 4. Thanks

[luaneko]

I've just spent a few hours pulling my hair and trying to diagnose why my routes weren't matching. Thank you!

[IsaacYongTY]

Yes changing to @4.10.1 solves the problem, been pulling my hair for quite some hours too!

[vodis]

But if you use callback in history.block() then v4 doesn't help!

[nsisodiya]

After spending sufficient time where I am wrong, I checkout my old code which was working. then I checked, both code is exactly same. After having good amount of headache, I compared package-lock.json file and then I found that old code is using history4 and new code is history 5.

Yes, there is a reason why things are called "bleeding edge"...

[leticiamrosa]

I was trying to figure out why the history it wasn't passed for my components, after the comments here I did the downgrade to history@4.10.1 and everything is work now.

Thanks, guys 👏

[McPatto]

Hi! Is there any other solution besides downgrading to v-4?

[kmacute]

Hi! Is there any other solution besides downgrading to v-4?

Thats' the solution xD

[antick]

Hi! Is there any other solution besides downgrading to v-4?

You can also upgrade react-router to 6 (alpha) because react-router 5.2 is using dependencies from history 4 and that is causing conflict issues. But personally, I would suggest to downgrade the history lib itself until react-router 6 is in a stable state.

[alex-shamshurin]

May be router should check if history 5 version and do throw

[ea167]

Same problem here, history v5 is incompatible with the current latest react-router.

[Denis-Step]

Wasted an entire day on this. So frustrating. Will update as soon as I test different versions. How was this problem traced to the history package?

[olof-nord]

I also came across this issue. Was solved by downgrading history to the last 4.x version.

    "history": "^4.10.1",
    "react-router-dom": "^5.2.0",

[sztahanova]

Jesus, guys, I just lost 2 days on desperately trying to figure out what went wrong in my project. Without any errors in the console or otherwise, the routing just stopped working, it drove me crazy... Lucky that I have just a few deps in my package.json so it didnt take ages to drill down to the faulty one... Hope it will be fixed soon!

Wasted an entire day on this. So frustrating. Will update as soon as I test different versions. How was this problem traced to the history package?

In my lowest moment I just started downgrading and upgrading back again all my deps one by one to catch which one causes the change in my app's behaviour...

[balovbohdan]

I also have issues with history 5. Decided to downgrade to ^4.

[Archivec2]

Upgrading history to v5.0.1 and react-router-dom to v6.0.0-beta.1 solved the issue for us. Tried with withRouters, props.history.push and none of them rerenders component though pushes the correct url.

[mjackson]

React Router 5 has a dependency on history v4, not v5. You should use history v4 with React Router 4/5.

we've upgraded the history version to 5.0.0 without knowing it because it was set to "latest" in package.json

You shouldn't ever use latest as the version dependency in your package.json because when new major versions are released with breaking changes your app will break. You can read more about how to set dependencies correctly in the package.json documentation on dependencies field where you will find links to references on how to use semver correctly as well.

For a React Router v5 project, if you want to install history separately you should have this in your package.json:

"dependencies": {
  "history": "^4.9.0"
}

[ipsips]

history is installed separately and used alongside react-router when there's a need to create history before instantiating BrowserRouter. For that purpose I propose react-router expose it's own createHistory methods (which could simply wrap the history.js api) so we wouldn't have to manually keep an eye on the versions - it's tedious and wastes our time

[Ashutosh-Bhadauriya]

I also came across this issue. Was solved by downgrading history to the last 4.x version.

    "history": "^4.10.1",
    "react-router-dom": "^5.2.0",

but link is still not working for me

[Manik92]

Hi! Is there any other solution besides downgrading to v-4?

Yes Instead of useHistory we can use "useNavigate" for the upgraded version

Eg:

import {useNavigate} from "react-router-dom"; const navigate = useNavigate();

In method:

navigate("/", {replace: true})

Reference: https://reactnavigation.org/docs/navigation-prop

[alirezaaali]

The useNavigate is not working in class component

[sztahanova]

The useNavigate is not working in class component

Hooks don't work in class components, they are meant to be used in functional components.

[jiangdan53]

I used the connected react router in my development, but when I update the routing data with Redux, I am prompted with the pathname error. How can I solve it

I am facing the same issue. It looks like there is some breaking changes in the newest version "5.0.0" of history package. For now, we can change its version to "4.10.1" which works for me. Use bellow command for change history version npm install history@4.10.1

[LeminGhori]

in localhost app is runing good but when i create build show this error history.ts:494 Uncaught Error at l (history.ts:494:11) at x (components.tsx:421:3) at Ei (react-dom.production.min.js:167:137) at Es (react-dom.production.min.js:290:337) at wu (react-dom.production.min.js:280:389) at yu (react-dom.production.min.js:280:320) at vu (react-dom.production.min.js:280:180) at iu (react-dom.production.min.js:271:88) at au (react-dom.production.min.js:268:429) at k (scheduler.production.min.js:13:203)