salvoravida / redux-first-history

Redux history binding support react-router - @reach/router - wouter - react-location
https://wvst19.csb.app/
MIT License
446 stars 34 forks source link

useLocation and history.location.pathname are not in sync #117

Open miestr opened 1 year ago

miestr commented 1 year ago

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"