History: 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-talentwunder]

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 [email protected]

[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

[phosphene47]

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 [email protected] 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...