How to Use Outlet in React Router for Nested Routes

In React Router, use the Outlet component inside a parent route component to render its nested child routes. This allows nested routes to display their content within the parent's layout seamlessly.

Syntax

The Outlet component is imported from react-router-dom and placed inside a parent route component's JSX. It acts as a placeholder where child routes will render their components.

Example parts:

• <Outlet />: Renders the matched child route component.
• Parent route component: Contains layout or shared UI and includes Outlet.
• Child routes: Defined inside the parent route in the router configuration.

jsx

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

function Parent() {
  return (
    <div>
      <h1>Parent Layout</h1>
      <Outlet />
    </div>
  );
}

Output

Displays 'Parent Layout' heading and renders child route content below it.

Example

This example shows a parent route with a header and two nested child routes. The Outlet renders the child route's content inside the parent layout.

jsx

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <h1>My Website</h1>
      <nav>
        <Link to="home">Home</Link> | <Link to="about">About</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h2>Welcome to the Home page!</h2>;
}

function About() {
  return <h2>About us content here.</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>  {/* Parent route */}
          <Route index element={<Home />} />  {/* Default child route */}
          <Route path="about" element={<About />} /> {/* Child route */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Output

Shows 'My Website' heading and navigation links. Clicking 'Home' or 'About' updates content below the header inside the same layout.

Common Pitfalls

• Not placing <Outlet /> in the parent component will cause child routes not to render.
• Defining child routes outside the parent route in <Routes> means Outlet won't render them.
• Using element prop incorrectly by forgetting to wrap child routes inside the parent route.

jsx

/* Wrong: No Outlet in parent, child routes won't show */
function Parent() {
  return <div><h1>Parent</h1></div>;
}

/* Right: Include Outlet to render children */
import { Outlet } from 'react-router-dom';

function Parent() {
  return (
    <div>
      <h1>Parent</h1>
      <Outlet />
    </div>
  );
}

Quick Reference

Tips for using Outlet in React Router:

• Always import Outlet from react-router-dom.
• Place <Outlet /> where child routes should render inside the parent component.
• Define child routes nested inside the parent route in <Routes>.
• Use Outlet to create layouts shared by multiple nested routes.

Key Takeaways

Use Outlet inside a parent route component to render nested child routes.

Child routes must be nested inside the parent route in the router configuration.

Without Outlet, child routes will not display their content.

Outlet helps create shared layouts for nested routes easily.

Always import Outlet from react-router-dom.