Suggest an edit

Improve this article

Refine the answer for “What does <Outlet> do?”. 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 `<Outlet>` does

> `<Outlet>` is an "insertion point" (placeholder)
> where React Router **renders the content of a nested route**.

If you have a parent route (for example, `/dashboard`)
that has child routes (`/dashboard/profile`, `/dashboard/settings`),
then `<Outlet>` is exactly what determines **where inside** `Dashboard` **the child page will be displayed**.

---

## Example

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

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

The `Dashboard` component might look like this:

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

{/* The child route will be inserted here */}
      <Outlet />
    </div>
  );
}
```

---

## How this works

| URL | What is rendered |
|---|---|
| `/dashboard` | `<Dashboard>` (still without `<Outlet>` content) |
| `/dashboard/profile` | `<Dashboard>` → `<Outlet>` → `<Profile>` |
| `/dashboard/settings` | `<Dashboard>` → `<Outlet>` → `<Settings>` |

`<Outlet>` = "insert the child route's content here".

---

## Example structure

```javascript
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>
```

Rendering (visually):

```javascript
Dashboard
 ├── Profile  ← inserted into <Outlet>
 └── Settings ← inserted into <Outlet>
```

---

## What `<Outlet>` is needed for

| Task | Why `<Outlet>` is needed |
|---|---|
| **Layout components** | Building pages with a shared template (header, sidebar, footer) |
| **UI reuse** | A shared design for all sub-pages |
| **Nested routes** | Enabling nested navigation |
| **Subtree isolation** | Different `<Outlet>`s can be used at different nesting levels |

---

## Example of a layout with shared UI

```javascript
function AppLayout() {
  return (
    <div>
      <Header />
      <Sidebar />
      <main>
        {/* All child pages will land here */}
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}
```

And the routes:

```javascript
<Route path="/" element={<AppLayout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="contact" element={<Contact />} />
</Route>
```

Now:

- `/` → `<Home />` is inserted into `<Outlet />`
- `/about` → `<About />`
- `/contact` → `<Contact />`

Header, Sidebar, and Footer stay **shared across all pages**.

---

## You can use multiple levels of `<Outlet>`

```javascript
<Route path="/app" element={<AppLayout />}>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route path="settings" element={<Settings />} />
  </Route>
</Route>
```

Visually:

```javascript
<AppLayout>
  <DashboardLayout>
    <Settings />
  </DashboardLayout>
</AppLayout>
```

Each layout has its own `<Outlet>`,
and each level of routes is "nested" inside the previous one.

---

## Important to remember

1. `<Outlet>` only works **inside a route that has child routes**.
If there are no child routes, `<Outlet>` renders nothing.
2. If you need content to show "by default" when the parent route (`/dashboard`) is opened,
add an **index route**:

```javascript
  <Route index element={<DashboardHome />} />
  ```
3. `<Outlet>` can be used **multiple times in different layout components** -
it is not limited to a single level.

---

## Summary:

> `<Outlet>` is a special React Router component
> that marks **the place** where the **child route** (nested route) should be rendered.

### It is needed for:

- building layout components (header, sidebar, footer);
- organizing nested navigation;
- reusing shared UI between pages.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.