What is the Outlet Component in React Router?

This article explains the Outlet component in React Router, detailing what it is, how it works, and how to use it to render nested routes. You will learn how the Outlet component acts as a placeholder within parent routes, allowing you to build complex layouts with shared user interface elements like navigation bars, sidebars, and footers.

Understanding the Outlet Component

The Outlet component is a built-in feature of the react-router-dom library. It is used in parent route components to specify where their child route components should be rendered.

In modern web applications, nested routing is a common pattern. For example, a dashboard page might have a persistent sidebar and top navigation bar, but the central content area changes depending on whether the user is viewing “Profile,” “Settings,” or “Analytics.” The Outlet component serves as the dynamic placeholder for these changing child views.

How the Outlet Component Works

When you define nested routes in React Router, the parent route component is rendered first. If the URL matches one of the nested child paths, React Router looks for the <Outlet /> tag inside the parent component and replaces it with the matching child component.

If the URL matches the parent route exactly but none of the child routes, the Outlet will render nothing, or it will render an index route if one is defined.

Code Example: Implementing Outlet

Here is a practical example of how to configure and use the Outlet component.

1. Define the Routes

First, set up your router configuration using createBrowserRouter or the JSX-based <Routes> component. In this example, the Layout component is the parent, and Home and Profile are nested child routes.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import Profile from './pages/Profile';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />, // Parent route
    children: [
      {
        index: true, // Renders by default at "/"
        element: <Home />,
      },
      {
        path: "profile", // Renders at "/profile"
        element: <Profile />,
      },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

2. Create the Parent Layout with the Outlet

Next, use the Outlet component inside the parent Layout component to designate where the child pages should appear.

import { Outlet, Link } from 'react-router-dom';

export default function Layout() {
  return (
    <div className="app-container">
      <header>
        <nav>
          <Link to="/">Home</Link> | <Link to="/profile">Profile</Link>
        </nav>
      </header>
      
      <main className="content">
        {/* Child components (Home or Profile) will render here */}
        <Outlet />
      </main>

      <footer>
        <p>© 2026 My React Application</p>
      </footer>
    </div>
  );
}

Why Use the Outlet Component?

Using the Outlet component provides several key benefits: