What is Nested routes and layouts in Remix?

Remixframework~5 mins

Nested routes and layouts in Remix

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Introduction

Nested routes and layouts help organize your app by showing parts inside other parts. This makes your pages load faster and keeps your code clean.

You want a main page with a header and footer that stays the same while content changes inside.

You have a dashboard with different sections that share a sidebar menu.

You want to show a list of items and details of one item on the same page area.

You want to reuse a layout for multiple pages without repeating code.

Syntax

Remix

app/
  ├── root.tsx         // Root layout (wraps all routes)
  └── routes/
      ├── index.tsx        // / (home)
      ├── about.tsx        // /about
      └── dashboard/
          ├── layout.tsx   // Nested layout inside dashboard
          ├── index.tsx    // Dashboard home
          └── settings.tsx // Dashboard settings

Each folder or file under app/routes becomes a route.

Files named layout.tsx define layouts that wrap child routes.

Examples

This is the main layout wrapping all pages with header and footer.

Remix

// app/root.tsx
import { Outlet } from '@remix-run/react';
export default function RootLayout() {
  return (
    <html lang="en">
      <head>
        <title>My Remix App</title>
      </head>
      <body>
        <header>My Site Header</header>
        <main>
          <Outlet />
        </main>
        <footer>My Site Footer</footer>
      </body>
    </html>
  );
}

This nested layout adds a menu for all dashboard pages.

Remix

// app/routes/dashboard/layout.tsx
import { Outlet } from '@remix-run/react';
export default function DashboardLayout() {
  return (
    <div>
      <nav>Dashboard Menu</nav>
      <section>
        <Outlet />
      </section>
    </div>
  );
}

This page shows inside the dashboard layout.

Remix

// app/routes/dashboard/settings.tsx
export default function Settings() {
  return <h2>Dashboard Settings Page</h2>;
}

Sample Program

This example shows a main layout with header and footer. Inside the dashboard folder, a nested layout adds a sidebar menu. The dashboard home and settings pages appear inside that nested layout.

Remix

// app/root.tsx
import { Outlet } from '@remix-run/react';
export default function RootLayout() {
  return (
    <html lang="en">
      <head>
        <title>My Remix App</title>
      </head>
      <body>
        <header style={{ padding: '1rem', backgroundColor: '#eee' }}>
          <h1>Site Header</h1>
        </header>
        <main style={{ padding: '1rem' }}>
          <Outlet />
        </main>
        <footer style={{ padding: '1rem', backgroundColor: '#eee' }}>
          Site Footer
        </footer>
      </body>
    </html>
  );
}

// app/routes/dashboard/layout.tsx
import { Outlet } from '@remix-run/react';
export default function DashboardLayout() {
  return (
    <div style={{ display: 'flex' }}>
      <nav style={{ width: '200px', backgroundColor: '#ddd', padding: '1rem' }}>
        <ul>
          <li>Dashboard Menu</li>
          <li>Settings</li>
        </ul>
      </nav>
      <section style={{ flex: 1, padding: '1rem' }}>
        <Outlet />
      </section>
    </div>
  );
}

// app/routes/dashboard/index.tsx
export default function DashboardHome() {
  return <h2>Welcome to the Dashboard Home</h2>;
}

// app/routes/dashboard/settings.tsx
export default function Settings() {
  return <h2>Dashboard Settings Page</h2>;
}

OutputSuccess

Important Notes

Use the <Outlet /> component to show child routes inside a layout.

Layouts help keep parts like headers or menus from reloading when you switch pages inside them.

Nested routes match URLs by folder structure, so /dashboard/settings uses both the root and dashboard layouts.

Summary

Nested routes let you build pages inside pages for better structure.

Layouts wrap child routes and keep shared parts visible.

Use <Outlet /> to show nested content inside layouts.