Вложенные маршруты

Вложенные маршруты позволяют строить иерархическую структуру экранов, где один маршрут отображается внутри другого. Это особенно полезно для создания интерфейсов с общей оболочкой — например, панель навигации или шапка остаются неизменными, а меняется только внутренний контент.

Принцип работы

В React Router v6 вложенные маршруты определяются через свойство children у компонента <Route>. Родительский маршрут задаёт общую разметку, а дочерние — то, что должно отображаться внутри.

Для отображения дочерних маршрутов внутри родительского компонента используется специальный компонент <Outlet />.

Пример: Панель управления

Предположим, у нас есть раздел /dashboard, который содержит подразделы: /dashboard/overview и /dashboard/settings.

// App.jsx
import { Routes, Route } from 'react-router-dom';
import DashboardLayout from './pages/DashboardLayout';
import Overview from './pages/Overview';
import Settings from './pages/Settings';

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route index element={<Overview />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Обратите внимание:

дочерние маршруты указываются внутри родительского <Route>;
путь settings указан без слеша — он автоматически становится частью родительского пути: /dashboard/settings;
маршрут с index совпадает с точным путём родителя (/dashboard).

Компонент `<Outlet />`

Внутри DashboardLayout нужно указать, куда вставлять дочерний контент:

// DashboardLayout.jsx
import { Outlet } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Обзор</Link>
        <Link to="/dashboard/settings">Настройки</Link>
      </nav>
      <main>
        <Outlet /> {/* Сюда будет подставляться Overview или Settings */}
      </main>
    </div>
  );
}

Без <Outlet /> дочерние маршруты не отобразятся.

Преимущества

Избегается дублирование общей разметки (например, меню);
Логика навигации и структура приложения становятся нагляднее;
Поддерживается естественная иерархия URL.

Важно