throwing redirect in beforeLoad function causes a memory leak

[arunim-io]

Which project does this relate to?

Router

Describe the bug

I was following the docs on authenticated routes, but the code doesn't seem to work properly. This is the root route code of my project:

import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { createRootRouteWithContext, Outlet, redirect } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";

interface RootRouteContext {
  queryClient: QueryClient;
}

export const Route = createRootRouteWithContext<RootRouteContext>()({
  beforeLoad: (ctx) => {
    throw redirect({ to: "/login" });
  },
  component: () => (
      <>
        <Outlet />
        <TanStackRouterDevtools />
        <ReactQueryDevtools />
      </>
    ),
});

If I use redirect inside the beforeLoad function, it causes a memory leak & the web page becomes unresponsive.

Your Example Website or App

https://stackblitz.com/edit/github-llcqibzz?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

1. Create a login.tsx file in src/routes/.
2. Specify the beforeLoad function in the route config of __root.tsx file.
3. throw a redirect to the login page in beforeLoad function.

Expected behavior

As recommended in the 'Authenticated Routes' section of the docs, it should have redirected me to the login page.

Screenshots or Videos

No response

Platform

• OS: Arch Linux inside Windows 11 WSL2
• Browser: Microsoft Edge
• Version: 135.0.3179.73

Additional context

No response

[schiller-manuel]

the root's beforeLoad will execute upon each navigation. so when you throw a redirect, a new navigation happens and thus the function will be invoked and will throw again. this is an infinite loop.
to break out of this, you can

• throw the redirect in a route that is below root
• check the current path in root and throw conditionally