Nested Routes: Composing UI with <Outlet>

WHY IT EXISTS: Modern web apps often have complex UIs where parts of the page remain constant while other parts change. Without nesting, you would have to duplicate layout code (like sidebars or headers) across many different page components. This makes the codebase brittle and hard to maintain.

THE MENTAL MODEL: Think of Russian nesting dolls for your UI. The outermost doll is your main app layout. You open it to find a dashboard layout. You open that to find a specific page's content. The <Outlet> component is the empty space inside a doll, waiting for the next, smaller doll to be placed inside it.

HOW IT WORKS: In React Router, you define your routes in a hierarchical tree. A parent <Route> is responsible for a segment of the URL and renders a layout component. This layout component must include an <Outlet> component. When the URL matches a more specific, nested child route, that child's element is rendered inside the parent's <Outlet>. The parent remains on screen, wrapping the child.

WHEN TO USE IT: Use nested routes for any UI that has a shared layout structure across multiple views. This is perfect for dashboards with a persistent sidebar, settings pages with tabbed navigation, or any master-detail view where a list on the side controls the content in a main panel. If you see yourself copying and pasting a <Header> or <Nav> component into multiple pages, you should probably be using a nested route.

WHEN NOT TO USE IT: Avoid nesting for pages that are conceptually and visually distinct. For example, your public-facing marketing homepage and your private, logged-in application dashboard should be separate top-level routes, not nested within each other. Also, be mindful that deeply nested routes can complicate passing props; consider using React Context or a state management library for sharing data across deep levels.

ONE CANONICAL EXAMPLE: A user settings page at /settings. This route renders a layout with a sidebar for navigation. Inside this route, you nest child routes for /settings/profile and /settings/billing. The parent component renders the sidebar and an <Outlet>. When a user clicks a link to /settings/profile, the ProfileForm component appears inside the <Outlet> without the sidebar having to re-render.