Closed ViewableGravy closed 2 months ago
Same issue on my side, especially when you want to redirect immediately to a nested route after a fetch.
Just wanted to provide an update on this. I think this may relate to an issue that I found today and which had a discussion thread created a few weeks back where essentially Outlet's aren't working... At least as far as I can tell.
https://github.com/TanStack/router/discussions/1765
TLDR; Any time you change route, all parent routes re-render and this seems to also happen for preloading which means during the preload phase, the component actually re-renders. Not sure if this is the same issue, but it seems like a pretty good candidate for causing something to crash.
this will be fixed by #1907
reproducer with pre-release package: https://stackblitz.com/edit/tanstack-router-rqtgbn?file=src%2Fmain.tsx,package-lock.json&preset=node
Describe the bug
I've noticed that when you are on a route, and then you hover over another link with preload: 'intent' enabled, and said route throws a redirect to the current route you are on, an infinite pending state is set on the router. For example
User is on
/my-services/hosting
and hovers over a link formy-services
, and the route for my-services has a before load something like this:When this happens, the router goes into a pending state and never leaves it. This also means that when no default pending component is specified, react does the default behavior of setting all direct children to display: none, so troubleshooting this becomes even harder because the dev tools are hidden ðŸ˜
While I do acknowledge that realistically, there should not be a button on
/my-services/hosting
that takes you to a route that is intended to redirect, I also encountered this while in the process of refactoring our application so ideally this case can be handled.I believe that the route has to be a nested route for this to happen. It also does not happen for any nested route, only if you are on the nested route that is being redirected in the prefetch.
I've attached a stackblitz below that should encounter the error when you are on the
about
route and hover the/
route link. Clicking any route refreshes the pending state and resolves the issueNote: I also noticed this older thread which is very similar: https://github.com/TanStack/router/issues/1480
Edit: Obviously this can be worked around for now using the following check if necessary for anyone else having this issue
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-b6npj2?file=src%2Fmain.tsx
Steps to Reproduce the Bug or Issue
Expected behavior
As a user, I expect the the application to continue rendering the page but the page enters a permanent pending state.
Screenshots or Videos
https://stackblitz.com/edit/tanstack-router-b6npj2?file=src%2Fmain.tsx
Platform
Additional context
No response