How to define a layout for a route group in TanStack Router?

[phnglh]

Hi, I’m exploring route grouping with TanStack Router and I’m wondering about the best practice for applying a layout to a group of routes.

[ferretwithaberet]

In Tanstack router, routes by default nest, so doing

- some-route.tsx  # /some-route
- some-route.some-other-route.tsx  # /some-route/some-other-route

will cause some-route.tsx to wrap some-other-route.tsx.

You can also use route.tsx inside of a folder to create a route

- some-route.tsx

# is same as

- some-route/
  - route.tsx

You can either use the pattern in the first codeblock from this answer, or, you can combine them like:

- some-route/
  - some-other-route.tsx
  - route.tsx  # Layout code

You can also get pathless routes into the equation to have actual layouts that do not affect the URL path, for example:

- _some-route/  # This does not get added to the URL
  - some-other-route.tsx  # So this will get mounted on the `/some-other-route` path instead of `/some-route/some-other-route`
  - route.tsx  # Layout code

If the default nesting behavior ever gives you headaches, there is also index.tsx, so you can have:

- some-route.index.tsx  # /some-route
- some-route.some-other-route.tsx  # /some-route/some-other-route

which will not cause some-route.tsx to wrap some-other-route.tsx.

[phnglh]

Thanks for sharing. I have solved this problem.