How to Build Nested Routes and Layouts in React Router

How to Build Nested Routes and Layouts in React Router

Nested routes are how real apps share a layout across multiple pages. Here is how to set them up cleanly.

The Parent Layout Component

Create a layout component that renders the shared UI, like a header, sidebar, and footer, plus an Outlet where child content goes.

Define the Parent Route

Add the layout as the element of a parent route. Child routes are nested inside that parent in the route definition.

How Rendering Works

When a child route matches, React Router renders the parent layout and the child inside the Outlet. The parent stays mounted, so its state is preserved across child navigations.

Use Index Routes for the Default Child

An index route renders at the parent's path when no child matches. Use it to show a default page, like a dashboard, when the user visits the parent URL directly.

Multi-Level Nesting

You can nest multiple levels deep. An app layout can contain a section layout, which contains page routes, each with their own Outlet.

Relative Links

Inside child routes, use relative links for navigation between siblings. This keeps your links robust if the parent path changes.

The Common Mistake

Defining child routes outside the parent, or forgetting the Outlet. Both lead to layouts that do not work as expected.

The Takeaway

Nested routes use a parent layout with an Outlet, child routes nested under the parent, an index route for the default child, and relative links between siblings. This is how scalable React apps are structured.