Best way to structure /auth layout with shared Lottie animation
Hi everyone đź‘‹
I have three forms in my app: login, send OTP, and verify OTP.
I want to show them on three separate pages:
• /auth/send-otp
• /auth/verify-otp
• /auth/login
Alongside these forms, I also have a Lottie animation file. My idea is to create an auth layout that renders the Lottie component on one side and an <Outlet /> on the other side where the forms will render.
This works fine for the three form pages, but I’m running into two issues:
1. If I go to /auth/, the route doesn’t react at all — it doesn’t render a page and it doesn’t show a NotFound.
2. Both the NotFound component and the Error component also get rendered inside the auth layout, next to the Lottie, which is not what I want.
Do you have any recommendations for handling this scenario? Ideally:
• I’d like /auth/* to use the layout with Lottie + Outlet,
• But /auth/ itself should show a proper NotFound,
• And NotFound / Error components should not be nested under the auth layout.
3 Replies
rare-sapphireOP•7d ago
The /auth/ part of my problem I know I could “solve” by adding an index.tsx under routes/auth/ and just doing a <Navigate to="/auth/login" /> (or render a small landing page). That works technically, but it feels like a workaround.
Is there a better / more idiomatic way in TanStack Router file-based routing to make /auth/ itself either redirect or show a proper NotFound, without having to add a dummy index.tsx file?
equal-jade•6d ago
can you please provide a complete minimal example by forking one of the router Stackblitz examples ?
rare-sapphireOP•6d ago
Actually, I realized that we don’t need to set a default Error or NotFound component in the router file; it should be set in __root.
The second thing is about layouts. For example, if we create a layout called test.tsx with an Outlet, until we create test.index.tsx, we have to manually return NotFound for /test/ if we don’t want the layout’s path to be counted as a route. By the way, TSR counts the layout itself as a route. Now I understand why there are two paths for a layout when we create an index file.
Actually, I’m not sure if this is intentional or if it will change in the future, but this is how it works for now.
I had also mentioned this earlier when we were working on the sitemap and dealing with router types.