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

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

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

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

Контент

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

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

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

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

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

## Що таке nested routes

> **Nested routes (вкладені маршрути)** - це маршрути,
> які **вкладені всередину інших маршрутів** і
> **відмальовуються всередині компонента батьківського маршруту**.

Тобто у тебе є "батьківська сторінка" (наприклад, `/dashboard`),
і всередині неї декілька "вкладених сторінок" (`/dashboard/profile`, `/dashboard/settings` тощо),
які **рендеряться всередині layout-у** батька.

---

## Простий приклад

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

Тепер при переході на:

- `/dashboard/profile` -> всередині `Dashboard` відобразиться `<Profile />`
- `/dashboard/settings` -> всередині `Dashboard` відобразиться `<Settings />`

---

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

1. Батьківський компонент (`Dashboard`) **повинен містити** `<Outlet />` -
це місце, куди React Router "вставить" дочірній маршрут.

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

export default Dashboard;
```

`<Outlet />` - це "точка вставки" для дочірнього компонента.
Якщо маршрут `/dashboard/profile`, то `<Outlet />` заміниться на `<Profile />`.

---

## Структура маршрутів

| URL | Компонент, що рендериться |
|---|---|
| `/dashboard` | `<Dashboard />` |
| `/dashboard/profile` | `<Dashboard>` -> `<Outlet>` -> `<Profile />` |
| `/dashboard/settings` | `<Dashboard>` -> `<Outlet>` -> `<Settings />` |

---

## Приклад глибокої вкладеності

Можна робити маршрути декількох рівнів:

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

Структура URL:

```javascript
/dashboard/settings/notifications
/dashboard/settings/security
```

Компоненти відмалюються як:

```javascript
Dashboard
 └── Settings
      └── Notifications (або Security)
```

---

## Навіщо потрібні nested routes

| Перевага | Що це дає |
|---|---|
| **Layout-компоненти** | Можна використовувати спільний layout (sidebar, header, footer) |
| **Перевикористання** | Не потрібно дублювати навігацію і структуру |
| **Ієрархія маршрутів** | Відображає структуру застосунку |
| **Зручність у RSC / Suspense** | Можна робити частковий рендер піддерев |
| **Чисті URL** | `/dashboard/settings`, `/dashboard/profile` тощо |

---

## Приклад реального 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>
```

Візуально:

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

---

## Важливо:

1. Батько **повинен містити** `<Outlet />` - інакше дочірні маршрути не відрендеряться.
2. Шляхи дочірніх маршрутів задаються **відносно батька** (без `/` на початку).

```javascript
  <Route path="profile" ... /> так
  <Route path="/profile" ... /> ні (вийде з батьківського рівня)
  ```
3. Можна додати **index route** - дочірній маршрут без шляху (рендериться за замовчуванням):

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

---

## Підсумок:

> **Nested routes** - це маршрути, вкладені один в одного.
> Вони дозволяють відображати підсторінки всередині layout-у батька через компонент `<Outlet />`.

Переваги:

- структура маршрутів повторює структуру застосунку;
- легко робити layout-сторінки (панель, дашборд, профіль);
- менше дублювання коду;
- відмінна сумісність з React Router v6.

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

Для рев’юера

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

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