How do layouts work with the router?

[rahiparikh]

Hi, I'd like to start by thanking you for building the router - it is great and super nice.

I am trying to understand how router (v1.4.2) + layouts work. If you can help me learn more, it would be great.

I have the following file-system structure:

.
├── __root.tsx
├── _layout.tsx
├── auth
│   ├── _layout.tsx
│   └── index.tsx
├── dash
│   ├── _layout.tsx
│   └── index.tsx
└── index.tsx

The code in ./_layout.tsx:

import { Link, Outlet, FileRoute } from '@tanstack/react-router'


function LayoutComponent() {
  return (
    <div>
      <div>I'm a layout</div>
      <div>
        <Outlet />
      </div>
    </div>
  )
}

export const Route = new FileRoute('/_layout').createRoute({
  component: LayoutComponent,
})

The code in ./dash/_layout.tsx:

const Layout = () => {
  return (
    <div>
      Layout
      <Outlet />
    </div>
  );
};

export const Route = new FileRoute('/dash/_layout').createRoute({
  component: Layout,
});

This generates the following routeTree.gen.ts.

import { Route as rootRoute } from './../pages/__root'
import { Route as LayoutImport } from './../pages/_layout'
import { Route as IndexImport } from './../pages/index'
import { Route as DashIndexImport } from './../pages/dash/index'
import { Route as AuthIndexImport } from './../pages/auth/index'
import { Route as DashLayoutImport } from './../pages/dash/_layout'
import { Route as AuthLayoutImport } from './../pages/auth/_layout'

const LayoutRoute = LayoutImport.update({
  id: '/_layout',
  getParentRoute: () => rootRoute,
} as any)

const IndexRoute = IndexImport.update({
  path: '/',
  getParentRoute: () => rootRoute,
} as any)

const DashIndexRoute = DashIndexImport.update({
  path: '/dash/',
  getParentRoute: () => rootRoute,
} as any)

const AuthIndexRoute = AuthIndexImport.update({
  path: '/auth/',
  getParentRoute: () => rootRoute,
} as any)

const DashLayoutRoute = DashLayoutImport.update({
  path: '/dash/layout',
  getParentRoute: () => rootRoute,
} as any)

const AuthLayoutRoute = AuthLayoutImport.update({
  path: '/auth/layout',
  getParentRoute: () => rootRoute,
} as any)
declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/': {
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
    '/_layout': {
      preLoaderRoute: typeof LayoutImport
      parentRoute: typeof rootRoute
    }
    '/auth/_layout': {
      preLoaderRoute: typeof AuthLayoutImport
      parentRoute: typeof rootRoute
    }
    '/dash/_layout': {
      preLoaderRoute: typeof DashLayoutImport
      parentRoute: typeof rootRoute
    }
    '/auth/': {
      preLoaderRoute: typeof AuthIndexImport
      parentRoute: typeof rootRoute
    }
    '/dash/': {
      preLoaderRoute: typeof DashIndexImport
      parentRoute: typeof rootRoute
    }
  }
}
export const routeTree = rootRoute.addChildren([
  IndexRoute,
  LayoutRoute,
  AuthLayoutRoute,
  DashLayoutRoute,
  AuthIndexRoute,
  DashIndexRoute,
])

Should the layouts in auth and dash directories be configured to have their own paths or should they be treated differently?

Thanks!

[Pixelycia]

Hello, answer a bit late, but for a future seekers will write what I found, because documentation lack about layouts mechanics. There are at least 2 options of organising folders to use layouts:

Option 1:

.
├── auth
│   ├── _layout.tsx
│   └── _layout.index.tsx

Option 2:

.
├── auth
│   ├── _layout.tsx
│   └── _layout
│       └── index.tsx

So as you see we should intentionally mark which layout we want to use. Inside layouts use <Outlet /> component to render child component. For examples above link remains the same: /auth. Hope it will help.

[nilshartmann]

I think you can also use:

I-- auth/
    I--- route.tsx               # Layout (includes child components with <Outlet />)
    I--- index.tsx               # /auth (uses layout from auth/route.tsx)
    I--- confirm/
             I-- index.tsx       # /auth/confim (uses layout from auth/route.tsx)

[Pixelycia]

well, this was my initial thought how to approach the task, but I didn't manage it to work, but example I gave above worked for me, maybe I'm wrong

[schiller-manuel]

because documentation lack about layouts mechanics

what's missing? can you provide a PR to add the missing parts?

[0xrasla]

Thanks! its working for me

[d-a-s]

I think you can also use:

I-- auth/
    I--- route.tsx               # Layout (includes child components with <Outlet />)
    I--- index.tsx               # /auth (uses layout from auth/route.tsx)
    I--- confirm/
             I-- index.tsx       # /auth/confim (uses layout from auth/route.tsx)

Actually there is a bug with route.tsx, so this doesn't work correctly. Currently, auth/index.tsx would actually be mapped to path /, and auth/confirm/index.tsx would be mapped to /confirm/. See PR for details

#1835