What are "nested routes"?

ReactJunior~2 min read

What nested routes are

Nested routes are routes that are nested inside other routes and rendered inside the parent route's component.

That is, you have a "parent page" (for example, /dashboard), and inside it several "nested pages" (/dashboard/profile, /dashboard/settings, etc.) that render inside the parent's layout.

A simple example

javascript

import { Routes, Route } from "react-router-dom";
import Dashboard from "./pages/Dashboard";
import Profile from "./pages/Profile";
import Settings from "./pages/Settings";

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Now navigating to:

/dashboard/profile -> <Profile /> renders inside Dashboard
/dashboard/settings -> <Settings /> renders inside Dashboard

How this works

The parent component (Dashboard) must contain an <Outlet /> - this is the place where React Router "inserts" the child route.

javascript

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

function Dashboard() {
  return (
    <div>
      <h1>Control panel</h1>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>

      {/* child routes are inserted here */}
      <Outlet />
    </div>
  );
}

export default Dashboard;

<Outlet /> is the "insertion point" for the child component. If the route is /dashboard/profile, <Outlet /> will be replaced with <Profile />.

Route structure

URL	Component rendered
`/dashboard`	`<Dashboard />`
`/dashboard/profile`	`<Dashboard>` -> `<Outlet>` -> `<Profile />`
`/dashboard/settings`	`<Dashboard>` -> `<Outlet>` -> `<Settings />`

Example of deep nesting

You can create routes of several levels:

javascript

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />}>
    <Route path="notifications" element={<Notifications />} />
    <Route path="security" element={<Security />} />
  </Route>
</Route>

URL structure:

javascript

/dashboard/settings/notifications
/dashboard/settings/security

The components render as:

javascript

Dashboard
 └── Settings
      └── Notifications (or Security)

Why nested routes are needed

Advantage	What it gives
Layout components	You can use a shared layout (sidebar, header, footer)
Reuse	No need to duplicate navigation and structure
Route hierarchy	Reflects the app's structure
Convenience with RSC / Suspense	You can partially render subtrees
Clean URLs	`/dashboard/settings`, `/dashboard/profile`, etc.

Example of a real layout

javascript

<Route path="/app" element={<AppLayout />}>
  <Route index element={<Home />} />  {/* /app */}
  <Route path="users" element={<UsersLayout />}>
    <Route index element={<UsersList />} />       {/* /app/users */}
    <Route path=":id" element={<UserDetail />} /> {/* /app/users/42 */}
  </Route>
  <Route path="settings" element={<Settings />} /> {/* /app/settings */}
</Route>

Visually:

javascript

/app
 ├── /users
 │    ├── /users/:id
 └── /settings

Important:

The parent must contain an <Outlet /> - otherwise the child routes won't render.
Child route paths are set relative to the parent (no / at the start).

javascript

<Route path="profile" ... /> yes
<Route path="/profile" ... /> no (would exit the parent level)

You can add an index route - a child route with no path (renders by default):

javascript

<Route index element={<DashboardHome />} />

Summary:

Nested routes are routes nested inside one another. They let you display subpages inside the parent's layout via the <Outlet /> component.

Advantages:

the route structure mirrors the app's structure;
easy to build layout pages (panel, dashboard, profile);
less code duplication;
great compatibility with React Router v6.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.