Що таке "nested routes"?

ReactJunior~1 хв читання

Що таке 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 />

Як це працює

Батьківський компонент (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

Важливо:

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

javascript

<Route path="profile" ... /> так
<Route path="/profile" ... /> ні (вийде з батьківського рівня)

Можна додати index route - дочірній маршрут без шляху (рендериться за замовчуванням):

javascript

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

Підсумок:

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

Переваги:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.