router
router copied to clipboard
Routes don't update internally when new routes passed to Router
Describe the bug
This may be more of an optimization than a bug, but I wanted to log the issue here because it took me some time to figure out what was going on.
If the user tries to navigates directly to /payments (by typing into /payments into the address bar and pressing the return key), no route match is found, so the * page renders.
Your Example Website or App
https://codesandbox.io/s/nice-benji-1i9jrw?file=/src/index.tsx
Steps to Reproduce the Bug or Issue
Navigate directly to /payments by typing /payments into the address bar and pressing the return key. No route match is found, so the * page renders.
This is because, upon page load, the private routes are not available yet, since the user's auth status has not yet been set to true.
Once the user is authed, if the user clicks a link to a private route from within the app UI, the correct route matches.
Expected behavior
When the routes that are passed to Router change, React Location doesn’t check to see if there’s a more direct match than a catch all for the current route. I would expect that if the routes that are given to it change, it should run a quick check to see if the current route is affected. If there’s a different match, it should change the route the user is on. If it’s the same, then nothing else needs to be done.
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: Chrome
- Version: 99.0.4844.74
Additional context
No response
Should this be addressed? if so I would like to help.
With the latest move to TanStack Router, routes are now meant to be very static. We can play with adding dynamic routes if you'd like, but for now, it's not the happy path.