Suggest an edit

Improve this article

Refine the answer for “What are "nested routes"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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

1. 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:

1. The parent **must contain** an `<Outlet />` - otherwise the child routes won't render.
2. 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)
  ```
3. 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts560 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.