[v5] Not compatible with React 18 StrictMode

[Jack-Works]

Version

v5.2.0

React 18 with StrictMode, see reactwg/react-18#19

Test Case

https://codesandbox.io/s/react-router-forked-1s3zi

Steps to reproduce

Click around

Expected Behavior

Works

Actual Behavior

Not working

[Jack-Works]

Tested with v6, seems OK

[patrikniebur]

I had the same issue. It's not working when used in React.StrictMode

[popuguytheparrot]

Yes. Same
https://codesandbox.io/s/react-router-sidebar-forked-mzyvs?file=/index.js
With v6 OK

[popuguytheparrot]

In my case, updating to version 6 is impossible, because there is no way to control history outside of react

[DeividasBakanas]

Just to clarify the issue: with React 18 StrictMode, react-router does not perform the transition when navigation occurs. The route is stale when the path is changed: https://codesandbox.io/s/dreamy-andras-hbuco1?file=/src/index.tsx

The behavior occurs in v5.3.0 too.

As React 18 is officially released and the StrictMode is preferred in many cases as default in a development environment, this issue should become more relevant.

As there is still no backwards compatibility package, can we expect the patch release of v5 for the issue?

[timdorr]

If someone wants to make a PR, I'd be happy to do a patch release for v5.

[rahulppatidar]

It is not working if BrowserRouter is a child of StrictMode. So, to make it work we can put StrictMode as child of BrowserRouter.
i.e. Instead of <React.StrictMode><BrowserRouter>...</BrowserRouter></React.StrictMode>
we can <BrowserRouter><React.StrictMode>...</React.StrictMode></BrowserRouter>
That way it worked for me.

[jgoz]

I think I've got a fix for this in #8831

[yoerivdm]

This solves it BUT we are experiencing mout-unmounts-mount cycles for each component. This rerender behaviour is solved when removing the strictmode.

[awreese]

Following this issue: https://stackoverflow.com/a/71833424/8690857

[phanimurari]

I had the same issue. It's not working when used in React.StrictMode

Thanks for the help

[fajria96]

Omg big thanks. I was so stressed out for few days cause of it

[altyaper]

It is not working if BrowserRouter is a child of StrictMode. So, to make it work we can put StrictMode as child of BrowserRouter. i.e. Instead of <React.StrictMode><BrowserRouter>...</BrowserRouter></React.StrictMode> we can <BrowserRouter><React.StrictMode>...</React.StrictMode></BrowserRouter> That way it worked for me.

The problem seems a little bit complicated for this approach because the issue also appears in the component, so StrictMode would be wrapping the routes.