T
TanStack8mo ago
correct-apricot

can i have multiple Pathless Route Group Directories at the same level, each with a layout inside?

i'm looking to have the following structure
routes
(auth)
_layout.tsx
index.tsx
(static)
_layout.tsx
landing.tsx
faq.tsx
routes
(auth)
_layout.tsx
index.tsx
(static)
_layout.tsx
landing.tsx
faq.tsx
i'm not actually sure that i need the layout in (static), but the key is that i dont want this group to be covered by (auth)'s layout. but even the (auth) layout is telling me i need unique paths for all routes. one solution that i think should work, but i don't love, is to lift the layout out of (auth), and then exclude (static) like (static)_, or something roughly like this. i would much prefer to have auth stuff with layout all nested under there
6 Replies
quickest-silver
quickest-silver8mo ago
- routes/
- _auth/
- route.tsx // layout
- index.tsx
- _static/
- route.tsx // layout
- landing.tsx
- faq.tsx
- routes/
- _auth/
- route.tsx // layout
- index.tsx
- _static/
- route.tsx // layout
- landing.tsx
- faq.tsx
(static) creates a group, not a pathless route, _static creates a pathless route
correct-apricot
correct-apricotOP8mo ago
I don’t understand the difference?
quickest-silver
quickest-silver8mo ago
Route groups are only for organization and cannot have a route.tsx, pathless routes can have a route.tsx. there is no such thing as a _layout.tsx (like other routers do) in tanstack router to create a layout, you either do
- _layout.tsx
- _layout/
- ... // Routes with layout
- _layout.tsx
- _layout/
- ... // Routes with layout
where layout is just a placeholder name, it can be anything, or you use route.tsx instead of that _layout.tsx to colocate the layout with the files it wraps over
- _layout/
- route.tsx // same as `_layout.tsx` from above
` ... // Routes with layout
- _layout/
- route.tsx // same as `_layout.tsx` from above
` ... // Routes with layout
there is no way to explicitly make a "layout", the above is a pathless route that allows other routes to nest inside of it you could also do
- some-route.tsx
- some-route/
- some-other-route.tsx
- some-route.tsx
- some-route/
- some-other-route.tsx
and on /some-route/some-other-route both routes will match and some-other-route will render inside the <Outlet /> from some-route.tsx (if it has one)
correct-apricot
correct-apricotOP8mo ago
Interesting thanks for the explanation. I don’t really understand the distinction, but I’ll opt for the pathless route as directory approach I’m not seeing an obvious reason why one would want route groups if this is the behavior?
quickest-silver
quickest-silver8mo ago
ngl, I am the one that asked for groups because I was used to them from other routers, but now that I learned how to use the tanstack router it's clear that pathless routes have the functionality that groups have in other routers
correct-apricot
correct-apricotOP8mo ago
Ah I really like the () syntax 😞

Did you find this page helpful?