react-router
react-router copied to clipboard
remix-run
[Bug]: Redirect component causes sync problems between multiple routers
What version of React Router are you using?
5.3.4
Steps to Reproduce
- Open https://codesandbox.io/s/aged-dawn-72rkzk
- Click
Go to dashboard
It's a simple example. The real app includes multiple apps that render their routers
Expected Behavior
States of routers are synchronized. The application renders the /about route
Actual Behavior
States of routers are out of sync
- Router 1 -
location.pathname === '/about'(correct) - Router 2 -
location.pathname === '/dashboard'(incorrect)
The application displays a blank page because the /about
https://codesandbox.io/s/dazzling-heyrovsky-4h45vr I think I solved the problem check it and let me know about this
@N-koder,
it's an unexpected restriction/behavior. I intentionally added this await Promise.resolve() before history.push to simulate a real case of navigation after async code.
history.{push|replace} is very often called in asynchronous code, developers should not remember about such a problem and somehow look for a workaround every time 😔
@AndyVereshchak That's a nice catch. It's confusing why using asynchronous function causes that kind of behaviour. I will see if I can fix that.
@AndyVereshchak now you can check it this time I not removed the promise stuff and it's work perfectly https://codesandbox.io/s/naughty-margulis-vwxkqz
@AndyVereshchak you're trying to use two separate instances of the <Router> component with the same history object. Each instance of <Router> should utilize the same history object to maintain the application's navigation history consistently. and I encountered the following warning in console : Warning: You cannot change <Router history> in Router (created by App) in App To resolve this warning, I use a single instance of <Router> wrapping all your routes. Instead of having multiple <Router> components, I include all routes within a single <Router> component.