Giters

TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.

Home Page:https://tanstack.com/router

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

BeforeLoad causing infinite pending state when redirecting to current nested route

ViewableGravy opened this issue · comments

commented

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 for my-services, and the route for my-services has a before load something like this:

if (location.pathname === '/my-services') {
    throw redirect({ to: '/my-services/hosting', replace: true });
}

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 issue

Note: I also noticed this older thread which is very similar:
#1480

Edit:
Obviously this can be worked around for now using the following check if necessary for anyone else having this issue

if (location.pathname === '/my-services' && cause !== 'preload') {
    throw redirect({ to: '/my-services/hosting', replace: true });
}

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-b6npj2?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

  1. Create Route
  2. Create Child Route
  3. In the parent route, in the before load, redirect the user to the child route
  4. Visit the child route
  5. Hover a link to the Parent route

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

  • OS: Windows
  • Browser: Chrome@latest & Arc@latest (For windows)

Additional context

No response

commented

Same issue on my side, especially when you want to redirect immediately to a nested route after a fetch.

commented

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.

#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.