TanStackT
TanStack•2y ago•
14 replies
ordinary-sapphire

Navigate to child pages from parent

I am build a React application with Tanstack Router. I have a problem navigating to child routes from a parent route.
I have a setup of routes like this:
- auth:
-sign-in
-sign-up

In the auth rout I want to check if the user is signed in or not, and redirect as needed, here is my code:
export const Route = createFileRoute("/auth")({
  component: () => {
    return (
      <div className="w-screen h-full">
        <SignedOut>
          <Navigate to="/auth/sign-in" />
          <Outlet />
        </SignedOut>
        <SignedIn>
          <Navigate to="/dashboard/organization" />
        </SignedIn>
      </div>
    );
  },
});


This works fine, but when I am redirected to the sign-in route, i am not able to visit the sign-up page, because i get instantly redirected back to the sign-in route, presumably because the parent route renders the navigation logic again.
How can this be fixed?
I could move the navigation logic into both the sign-in and sign-up page, but this leaves me with 2 problems:
- I reuse the same logic multiple places, I do not want to do that.
- The user will be able to visit /auth, which will have no content.

Does anyone know how this can be fixed?
Was this page helpful?