sunny-green

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>
    );
  },
});

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?

13 Replies

magic-amber•13mo ago

can you please provide a minimal complete example?

sunny-greenOP•13mo ago

There is not really much more to it than the code already sent in the original message...

magic-amber•13mo ago

well now I can only guess how the impl of <SignedOut> etc looks like without a minimal complete example (e.g. by forking one of the existing router examples on stackblitz) we most likely can't help you

sunny-greenOP•13mo ago

Of course, my bad. Are there any codepen/stackblitz template I can use to create an example?

magic-amber•13mo ago

lots of examples here https://tanstack.com/router/latest/docs/framework/react/examples/quickstart-file-based

React TanStack Router Quickstart File Based Example | TanStack Rout...

An example showing how to implement Quickstart File Based in React using TanStack Router.

magic-amber•13mo ago

have a look at the left side

sunny-greenOP•13mo ago

Here is the example: https://stackblitz.com/edit/tanstack-router-otrpqx?file=src%2Froutes%2Fauth%2Froute.tsx,src%2Froutes%2Fauth%2Fsign-in.tsx,src%2Froutes%2Fauth%2Fsign-up.tsx,src%2Froutes%2Findex.tsx&preset=node By navigating to /auth/sign-in everything works fine, but navigating to /auth/sign-up, you get directed back to /auth/sign-in. The SignedIn/SignedOut components in /auth, are not present in the example, since they don't have anything to do with this

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

magic-amber•13mo ago

what exactly is your goal? redirecting the user to /auth/sign-up if he tries to directly access /auth ?

sunny-greenOP•13mo ago

Yea redierect them to /auth/sign-up or /auth/sign-in if they are not signed in. And then to /dashboard if they are. I do not want anyone to access the /auth page, since it does not have any content.

afraid-scarlet•13mo ago

If you want no one accessing /auth why make it a page?

afraid-scarlet•13mo ago

You could do something like this With this _auth is just a layout route Any user going to /auth would see a 404

afraid-scarlet•13mo ago

Something like this https://stackblitz.com/edit/tanstack-router-t5dlzb?file=src%2Froutes%2F_auth.tsx,src%2Froutes%2F_auth.sign-in.tsx,src%2Froutes%2F_auth.sign-up.tsx&preset=node

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

sunny-greenOP•13mo ago

Thank you very much!

Gaming

Programming

Navigate to child pages from parent

Did you find this page helpful?