Layouts and Groups

Nested layouts let the Task Tracker keep shared chrome mounted while page content changes underneath it.

Minimal working example

// app/routes/tasks/_layout.tsx
import { Link, Outlet } from "react-bun-ssr/route";

export default function TasksLayout() {
  return (
    <main>
      <header>
        <h1>Task Tracker</h1>
        <nav>
          <Link to="/tasks">All tasks</Link>
          <Link to="/tasks/new">New task</Link>
        </nav>
      </header>
      <Outlet />
    </main>
  );
}

app/routes/
  (app)/
    tasks/
      _layout.tsx
      index.tsx
      [id].tsx

The (app) directory groups routes without adding /app to the URL.

Why it matters

Layouts are the backbone for client transitions:

• shared UI stays mounted
• only the changing leaf route swaps
• shared data and navigation state can remain stable

Rules

• _layout.tsx wraps nested routes.
• (group) directories organize route files without changing the public path.
• _middleware.ts runs alongside the matched layout/page chain.

For request-pipeline order, ctx.locals, and short-circuit response behavior, read Middleware.

Related APIs

• Outlet
• Middleware

Next step

Read Middleware to see how request flow layers onto the shared route graph.