frontend-route-layout

name	frontend-route-layout
description	Use when creating or modifying route-level layouts, layout routes, shared page wrappers using TanStack Router's Outlet pattern, or when a component wraps multiple pages

Frontend: Route Layouts (TanStack Router)

Route layouts are layout routes that wrap a group of child routes with shared UI (navigation, sidebars, theme wrappers). They use TanStack Router's file-based _prefix convention and render children via <Outlet />.

CRITICAL: Never use wrapper components for layouts. If multiple routes share a visual frame (nav, sidebar, container), it MUST be a layout route — not a component that each page imports and wraps around its content.

Layout Route Pattern

File Convention

Layout routes use underscore _ prefix — this creates a route node with NO URL path segment:

src/routes/
├── _auth.tsx              # Layout: auth pages (no URL segment)
├── _auth/
│   ├── login.tsx          # URL: /login  (not /_auth/login)
│   └── signup.tsx         # URL: /signup
├── _protected.tsx         # Layout: authenticated pages
├── _protected/
│   ├── index.tsx          # URL: /
│   └── $organizationId/  # URL: /$organizationId/...

The _ prefix is pathless — child routes get clean URLs. _auth/login.tsx resolves to /login, not /_auth/login.

Layout Route File

// src/routes/_auth.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";
import { theme as antdTheme }  ;

   = ()({
    : ,
});

 () {
     { token } = antdTheme.();

     (
        
    );
}