What Is the Outlet Component in React Router and How to Use It

What Is the Outlet Component in React Router and How to Use It

Outlet is the component that makes nested routes and shared layouts work in React Router. Here is what it does and how to use it.

What Outlet Does

Outlet is a placeholder in a parent route's component where the matching child route renders. The parent renders the shared layout, and the child renders inside the Outlet.

Why It Matters

Without Outlet, you would have to repeat the layout, header, sidebar, and footer in every page. Outlet lets you define the layout once and let child pages render inside it.

Setting Up a Layout

Create a layout component that renders the shared UI and an Outlet. Define it as the element of a parent route, and nest child routes inside that parent.

How Matching Works

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

Nested Layouts

You can nest layouts multiple levels deep. A main layout can contain a section layout, which contains page content, each with their own Outlet.

The Common Mistake

Forgetting to add the Outlet in the layout component. Without it, child routes have nowhere to render, and nothing appears even though the route matches.

The Takeaway

Outlet is the placeholder where matching child routes render inside a parent layout. Define the layout once, place an Outlet where child content should go, and nest child routes under the parent.