Nested routes

Learn to manage nested routes with Outlet.

Nested routes

Nested routes let you define routes under another route. Paths like /dashboard/stats and /dashboard/settings sit under a single dashboard umbrella.

To do this, nest Route components and use Outlet in the parent. Outlet marks where the matched child route renders.

This pattern is very common for pages that share a common layout (sidebar, header). The layout is written once, not repeated for each child page.

Route structure

When defining nested routes, you place Route components inside other Route components. The parent route renders its own component; that component's JSX has Outlet where the child renders.

Example: the /dashboard path renders the Dashboard component; the /dashboard/stats child path renders Stats inside Dashboard, at the Outlet location.

The parent usually contains the layout; the child fills the content area.

Exercise Dashboard layout

Complete the skeleton below. Write a Dashboard component; return a nav with a heading and an <Outlet /> where the child route renders. Export it.

Show example solution

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

function Dashboard() {
  return (
    <div>
      <nav>Panel</nav>
      <Outlet />
    </div>
  );
}

export default Dashboard;

Test yourself

Where does the child route render?
- Inside <Route>
- Inside <Link>
- <Outlet> konumuna
- Inside <Switch>
Show answer

<Outlet> konumuna — Outlet marks where the matched child route renders.

Outlet element

return <div><Sidebar /><____ /></div>;

Show answer

return <div><Sidebar /><Outlet /></div>;

Match concepts

Outlet

Child route slot
Route

Path definition
/dashboard

Parent path
stats

Child path

Next lesson: Programmatic navigation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies