extended-yellow

Nested layout for routes

Hey, everybody! I am trying to create the following authentication route structure and I need to add a generic layout that wraps the sign-in and sign-up routes. I have created a pathless route _layout.tsx, but it doesn't seem to work. I've read several threads about this, but haven't figured out how to properly define this layout. I'd be glad if anyone can help. Thanks!

routes/
├── auth/
│   ├── sign-in/
│   │   └── index.tsx
│   ├── sidn-up/
│   │   └── index.tsx
│   └── _layout.tsx <- not working.
├── __root.tsx
└── index.tsx

routes/
├── auth/
│   ├── sign-in/
│   │   └── index.tsx
│   ├── sidn-up/
│   │   └── index.tsx
│   └── _layout.tsx <- not working.
├── __root.tsx
└── index.tsx

7 Replies

fair-rose•7mo ago

I think the issue is it doesn't work like Next. In this case if you wanted a shared layout, you'd either have auth/route.tsx or auth.tsx since _ are reserved for pathless routes and in this case you can piggy back on the auth part of the URL. Now if you feel like you'll have a different layout for something like forgot-password then you would want a shared file for sign-in and sign-up. For that you need a common folder so you'd have _auth_layout/sign-in.tsx and _auth_layout/sign-up.tsx

constant-blue•7mo ago

You could rename _layout.tsx to route.tsx. This video might help if you are coming from nextjs: https://youtu.be/X7W8YOV1klo?si=oLeVFkkaSrCsSGlb

Lazar Nikolov

YouTube

Next.js-like routing in TanStack Start

How to achieve Next.js-like routing and layouting in TanStack Start. A reply to @WebDevCody's video. Cody's video: https://www.youtube.com/watch?v=W94PAGMNbO4 GitHub repo: https://github.com/nikolovlazar/trivius ▬▬▬▬▬▬▬▬ 💬 A bunch of us are hanging out at https://discord.creatures.sh/. Join us! 🦋 Find me on Bluesky: https://bsky.app/profile/n...

multiple-amethyst•7mo ago

I swear I read/saw something that said route.tsx was deprecated or incorrect

inland-turquoise•7mo ago

same. Just spent literally 2 hrs trying to understand how to do this. The docs could use some more clarity around layouts as everybody's getting used to nextjs's style lol

fair-rose•7mo ago

we welcome all contributions to the docs! can you create a PR to clarify things?

inland-turquoise•7mo ago

Yeah will do, still not super sure how all of this works, but I'd love to have some sort of "nested layouts" example structure... Would that work?

fair-rose•7mo ago

maybe? just try to come up with something (also make sure you checked the whole doc whether something like this does not yet exist) and then I'll have a look

Gaming

Programming

Nested layout for routes

Did you find this page helpful?