Вкладені маршрути · fullstack.org.ua

Середній11 хв· Fullstack Team

Вкладені маршрути

Організуєте вкладені маршрути для складних розділів застосунку та відобразите дочірні сторінки через Outlet.

Що таке вкладені маршрути

Вкладені маршрути використовують, коли один розділ застосунку має власну структуру сторінок.

Наприклад, розділ «Панель керування» може містити:

головну сторінку панелі;
список замовлень;
профіль користувача;
налаштування.

У такому випадку URL можуть мати спільний префікс:

text

/dashboard
/dashboard/orders
/dashboard/profile
/dashboard/settings

Батьківський маршрут відповідає за спільний інтерфейс розділу, а дочірній — за конкретний вміст.

Для відображення дочірнього маршруту в React Router використовується компонент

Outlet

jsx

<Routes>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route index element={<DashboardHome />} />
    <Route path="orders" element={<OrdersPage />} />
    <Route path="profile" element={<ProfilePage />} />
  </Route>
</Routes>

jsx

import {
  BrowserRouter,
  NavLink,
  Outlet,
  Route,
  Routes,
} from "react-router-dom";

function HomePage() {
  return (
    <main>
      <h1>Головна сторінка</h1>
      <p>Ласкаво просимо до застосунку.</p>
    </main>
  );
}

function DashboardLayout() {
  return (
    <main>
      <h1>Панель керування</h1>

      <nav>
        <NavLink to=".">Огляд</NavLink>{" | "}
        <NavLink to="orders">Замовлення</NavLink>{" | "}
        <NavLink to="profile">Профіль</NavLink>
      </nav>

      <hr />

      <Outlet />
    </main>
  );
}

function DashboardHome() {
  return (
    <section>
      <h2>Огляд</h2>
      <p>Основна інформація про ваш обліковий запис.</p>
    </section>
  );
}

function OrdersPage() {
  return (
    <section>
      <h2>Замовлення</h2>
      <p>Тут відображається список замовлень.</p>
    </section>
  );
}

function ProfilePage() {
  return (
    <section>
      <h2>Профіль</h2>
      <p>Тут можна переглянути дані профілю.</p>
    </section>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />

        <Route path="dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardHome />} />
          <Route path="orders" element={<OrdersPage />} />
          <Route path="profile" element={<ProfilePage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

jsx

<Routes>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route path="orders" element={<OrdersLayout />}>
      <Route index element={<ActiveOrdersPage />} />
      <Route path="archive" element={<ArchivedOrdersPage />} />
    </Route>
  </Route>
</Routes>

jsx

import { NavLink, Outlet } from "react-router-dom";

function OrdersLayout() {
  return (
    <section>
      <h2>Замовлення</h2>

      <nav>
        <NavLink to=".">Активні</NavLink>{" | "}
        <NavLink to="archive">Архів</NavLink>
      </nav>

      <Outlet />
    </section>
  );
}

jsx

function SectionLayout() {
  return (
    <section>
      <h1>Назва розділу</h1>
      <nav>
        <NavLink to=".">Огляд</NavLink>{" | "}
        <NavLink to="details">Деталі</NavLink>
      </nav>

      <Outlet />
    </section>
  );
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="section" element={<SectionLayout />}>
        <Route index element={<SectionHome />} />
        <Route path="details" element={<SectionDetails />} />
      </Route>
    </Routes>
  );
}

Вкладені маршрути

Що таке вкладені маршрути

Компонент `Outlet`

Опис вкладених маршрутів

Індексний маршрут

Навігація між дочірніми сторінками

Повний приклад