Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить <Outlet>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить `<Outlet>`

> `<Outlet>` - це "точка вставки" (placeholder),
> в яку React Router **рендерить вміст вкладеного маршруту**.

Якщо у тебе є батьківський маршрут (наприклад, `/dashboard`),
і в ньому є дочірні (`/dashboard/profile`, `/dashboard/settings`),
то саме `<Outlet>` визначає, **де всередині** `Dashboard` **відображатиметься дочірня сторінка**.

---

## Приклад

```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>
  );
}
```

Компонент `Dashboard` може виглядати так:

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

function Dashboard() {
  return (
    <div>
      <h1>Панель керування</h1>
      <nav>
        <Link to="profile">Профіль</Link>
        <Link to="settings">Налаштування</Link>
      </nav>

{/* Тут буде вставлятися дочірній маршрут */}
      <Outlet />
    </div>
  );
}
```

---

## Як це працює

| URL | Що рендериться |
|---|---|
| `/dashboard` | `<Dashboard>` (поки без вмісту `<Outlet>`) |
| `/dashboard/profile` | `<Dashboard>` → `<Outlet>` → `<Profile>` |
| `/dashboard/settings` | `<Dashboard>` → `<Outlet>` → `<Settings>` |

`<Outlet>` = "встав сюди вміст дочірнього маршруту".

---

## Приклад структури

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

Відображення (візуально):

```javascript
Dashboard
 ├── Profile  ← вставляється в <Outlet>
 └── Settings ← вставляється в <Outlet>
```

---

## Навіщо потрібен `<Outlet>`

| Завдання | Навіщо потрібен `<Outlet>` |
|---|---|
| **Layout-компоненти** | Створення сторінок зі спільним шаблоном (header, sidebar, footer) |
| **Перевикористання UI** | Спільний дизайн для всіх підсторінок |
| **Nested routes** | Можливість вкладеної навігації |
| **Ізоляція піддерев** | Можна використовувати різні `<Outlet>` на різних рівнях вкладеності |

---

## Приклад layout зі спільним UI

```javascript
function AppLayout() {
  return (
    <div>
      <Header />
      <Sidebar />
      <main>
        {/* Всередину потраплять усі дочірні сторінки */}
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}
```

І маршрути:

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

Тепер:

- `/` → `<Home />` вставляється в `<Outlet />`
- `/about` → `<About />`
- `/contact` → `<Contact />`

Header, Sidebar і Footer залишаються **спільними для всіх сторінок**.

---

## Можна використовувати кілька рівнів `<Outlet>`

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

Візуально:

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

Кожен layout має свій `<Outlet>`,
і кожен рівень маршрутів "вкладається" в попередній.

---

## Важливо пам'ятати

1. `<Outlet>` працює **тільки всередині маршруту, який має дочірні маршрути**.
Якщо дочірніх маршрутів немає, `<Outlet>` нічого не рендерить.
2. Якщо потрібно, щоб при відкритті батьківського маршруту (`/dashboard`)
показувався контент "за замовчуванням" - додай **index route**:

```javascript
  <Route index element={<DashboardHome />} />
  ```
3. `<Outlet>` можна використовувати **кілька разів у різних layout-компонентах** -
це не обмежено одним рівнем.

---

## Підсумок:

> `<Outlet>` - це спеціальний компонент React Router,
> який вказує **місце**, де повинен відображатися **дочірній маршрут** (nested route).

### Він потрібен для:

- створення layout-компонентів (header, sidebar, footer);
- організації вкладеної навігації;
- перевикористання спільного UI між сторінками.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати509 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.