salvoravida/redux-first-history

useLocation and history.location.pathname are not in sync

Opened this issue · 0 comments

I have a weird timing issue where useLocation().pathname and history.location.pathname are NOT in sync, which leads to a wrong app re-rendering.

App logic: there are two routes available if the user is logged in: "/dashboard" and "/forbidden". The app initialisation navigates to "/dashboard" and then logs the user in. So I expect the "forbidden" component not to be rendered, when I access the app with this route, but to be redirected to the dashboard. However, in the console, the second app rendering after the login still delivers useLocation().pathname = "/forbidden", whereas history is correct. Which triggers the rendering of the "forbidden" component instead of the "dashboard".

I attached a sandbox where the issue is reproducable: https://codesandbox.io/s/laughing-stitch-y3cwvd?file=/src/App.js
If you type the URL "/forbidden", you will see three console outputs. Why the pathnames are different in the second rendering?

I use following versions:
"react": "18.2.0"
"react-dom": "18.2.0"
"react-router": "6.10.0"
"react-router-dom": "6.10.0"
"react-router-redux": "4.0.8"
"redux-first-history": "5.1.1"
"history": "5.3.0"