Layouts

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

1. Explain what a layout route renders and where child routes appear
2. Build a layout with navigation and an outlet
3. Spot the navigation rendered inside every page and what it costs

In practice

A few lines that show Layouts doing its job.

const router = createBrowserRouter([
  {
    element: <AppLayout />,          // nav + <Outlet />
    children: [
      { path: "/", element: <Home /> },
      { path: "/settings", element: <Settings /> },
    ],
  },
]);

function AppLayout() {
  return <><Nav /><main><Outlet /></main></>;
}

The common mistake

What to know first

Your roadmap puts these before Layouts, unless you already know them.

• Routes and links
• Children and composition

How it stays learned

Once a session shows you understand Layouts, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

1. Day 3First recall, while it is fresh
2. Day 7Second, a week on
3. Day 18Last, when it has settled