Concept Flow - Nested routes and layouts

Start at root route

↓

Render root layout

↓

Check nested route match

Yes↓

Render nested layout

↓

Render nested route component

↓

Display combined UI

↓

User navigates -> Repeat

The app starts at the root route, renders its layout, then checks for nested routes. If a nested route matches, it renders the nested layout and component inside the root layout, combining UI layers.

Execution Sample

Remix

import { Outlet } from "@remix-run/react";

export default function RootLayout() {
  return <html><body><Outlet /></body></html>;
}

export function DashboardLayout() {
  return <section><h1>Dashboard</h1><Outlet /></section>;
}

export function DashboardHome() {
  return <p>Welcome to your dashboard!</p>;
}

This code shows a root layout with an outlet, a nested dashboard layout with its own outlet, and a dashboard home component rendered inside.

Execution Table

Step	Route Matched	Layout Rendered	Component Rendered	UI Output
1	Root '/'	RootLayout	None	<html><body>...</body></html>
2	Nested '/dashboard'	DashboardLayout	None	<html><body><section><h1>Dashboard</h1>...</section></body></html>
3	Nested '/dashboard' home	DashboardLayout	DashboardHome	<html><body><section><h1>Dashboard</h1><p>Welcome to your dashboard!</p></section></body></html>
4	User navigates away	Depends on route	Depends on route	UI updates accordingly
5	No matching route	None	None	404 or fallback UI shown

💡 Execution stops when no matching route is found or user leaves the nested route.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
CurrentRoute	null	/	/dashboard	/dashboard/home	varies
RenderedLayouts	[]	[RootLayout]	[RootLayout, DashboardLayout]	[RootLayout, DashboardLayout]	varies
RenderedComponents	[]	[]	[]	[DashboardHome]	varies
UIOutput	""	<html><body>...</body></html>	<html><body><section>...</section></body></html>	<html><body><section><p>Welcome to your dashboard!</p></section></body></html>	varies

Key Moments - 3 Insights

Why do we see both RootLayout and DashboardLayout rendered together?

What happens if a nested route has no matching component?

How does the UI update when navigating between nested routes?

Visual Quiz - 3 Questions

Test your understanding

Look at the execution table, what layouts are rendered at step 3?

ARootLayout and DashboardLayout

BOnly RootLayout

COnly DashboardLayout

DNo layouts rendered

Concept Snapshot

Nested routes in Remix use layouts with <Outlet /> to render child routes inside parent layouts.
Root layouts wrap the whole app; nested layouts wrap nested routes.
When navigating, layouts stay mounted and nested components update inside <Outlet />.
This creates a layered UI that matches the route hierarchy.
Use nested folders and files to define nested routes and layouts.

Full Transcript

Nested routes and layouts in Remix work by rendering parent layouts first, then nested layouts and components inside them using the <Outlet /> component. The root route renders its layout, which includes an <Outlet /> where nested routes render their layouts and components. When a nested route matches, its layout renders inside the parent's <Outlet />, and its component renders inside its own <Outlet /> if it has children. This creates a layered UI structure that matches the route nesting. The execution table shows step-by-step how the root layout renders first, then the dashboard layout, then the dashboard home component inside it. Variables track the current route, rendered layouts, components, and the combined UI output. Key moments clarify why multiple layouts render together and how UI updates when navigating nested routes. The visual quiz tests understanding of which layouts and components render at each step and what happens on unmatched routes. The concept snapshot summarizes the nested route and layout pattern in Remix for quick reference.