How to Create Nested Routes with React Router

Nested routes in React Router let one route render inside another, so a shared layout stays mounted while child pages swap into an Outlet. A parent route owns a URL prefix, and its children add segments after it. This guide builds a dashboard where /dashboard and /dashboard/settings share one frame.

Set up the parent route

The parent route carries the layout and the URL prefix. Give it a path and an element, then nest child routes inside it.

App.jsx

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Overview />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

The child paths are relative. A child with path settings becomes /dashboard/settings, and the index route renders Overview at /dashboard itself. The index route is the default child for the parent's own path.

This single config produces two URLs from three routes.

A parent can also use a layout route with no path when the frame should not change the URL. That pattern appears in the React Router tutorial.

Render the child with Outlet

The parent has to say where child content appears. Put an Outlet in the Dashboard component, and React Router renders the matching child there.

App.jsx

import { Outlet } from "react-router";
 
export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

When the URL is /dashboard, Overview renders inside the Outlet. When it is /dashboard/settings, Settings renders there instead, and the h1 stays put. The layout mounts once, so shared state inside Dashboard survives page changes.

This is the same Outlet idea used by layout routes, applied to a route that owns a URL prefix.

Link between nested pages

Inside a nested page, links can be relative to the parent route. A Link to settings resolves to /dashboard/settings because the current route is /dashboard.

App.jsx

import { Link } from "react-router";
 
export default function DashboardNav() {
  return (
    <nav>
      <Link to="overview">Overview</Link>
      <Link to="settings">Settings</Link>
    </nav>
  );
}

A leading slash would make the link absolute, so to="/settings" would target /settings instead. Keep child links relative while you are inside the parent.

How the URL builds up

The final paths come from joining the parent prefix with each child path.

• /dashboard matches the parent route and renders the index child Overview.
• /dashboard/settings matches the settings child and renders it in the same Outlet.
• /dashboard/anything-else matches nothing unless you add another child route.

Nest another level

Nesting is recursive. Give a child route its own children and its own Outlet, and the URL keeps gaining segments. When a child needs a changing value in the URL, add a parameter to the child path, which dynamic routes and URL parameters explains.

Each level only needs an Outlet in the component that owns the child routes.

Common mistakes

• Forgetting Outlet in the parent, so child pages never appear.
• Giving a child an absolute path, which breaks the shared prefix.
• Repeating the layout in every child instead of the parent.