Do layouts work in router folder groups?

Should this be working as expected? Or have I done something wrong

4 Replies

flat-fuchsiaOP•16mo ago

I'm just not seeing the layout, only the matched route

like-gold•16mo ago

https://tanstack.com/router/latest/docs/framework/react/guide/route-trees

Route Trees & Nesting | TanStack Router React Docs

Like most other routers, TanStack Router uses a nested route tree to match up the URL with the correct component tree to render. To build a route tree, TanStack Router supports both:

like-gold•16mo ago

If you are using a nested directories structure then the routes to be shown under a named layout need to be placed within a folder of the same name:

src/routes
  index.tsx
  app/
    outside-of-the-layout.tsx
    _dashboard.tsx
    _dashboard/
      sales.tsx
      settings.tsx

src/routes
  index.tsx
  app/
    outside-of-the-layout.tsx
    _dashboard.tsx
    _dashboard/
      sales.tsx
      settings.tsx

If you are using a flat structure then the routes within a named layout need to be prefixed with same name as the layout:

src/routes
  index.tsx
  app.outside-of-the-layout.tsx
  app._dashboard.tsx
  app._dashboard.sales.tsx
  app._dashboard.settings.tsx

src/routes
  index.tsx
  app.outside-of-the-layout.tsx
  app._dashboard.tsx
  app._dashboard.sales.tsx
  app._dashboard.settings.tsx

flat-fuchsiaOP•16mo ago

Riighttt hmm I see. I couldn't quite figure that out from those docs😄 Thanks for clarifying I am using a nested structure

Gaming

Programming

Do layouts work in router folder groups?

Did you find this page helpful?