Pathless routes

Pathless routes — это маршруты, которые не имеют явно заданного пути (path) и используются для организации структуры вложенных маршрутов и управления логикой рендеринга дочерних компонентов. В React Router они помогают создавать общий контекст для нескольких дочерних маршрутов без необходимости привязывать этот контекст к конкретному URL.

Основная идея pathless routes

В React Router <Route> обычно требует атрибут path, чтобы сопоставлять URL с компонентом. Однако pathless routes не имеют path и служат исключительно как контейнер для вложенных маршрутов. Они позволяют:

  • Объединять несколько маршрутов под общим компонентом.
  • Делать условный рендеринг для группы маршрутов.
  • Использовать общие контексты и хуки, например, useLoaderData или useOutletContext.

Пример структуры с pathless route:

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

function DashboardLayout() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet />
    </div>
  );
}

function Users() {
  return <div>Список пользователей</div>;
}

function Settings() {
  return <div>Настройки</div>;
}

export default function App() {
  return (
    <Routes>
      <Route element={<DashboardLayout />}>
        <Route path="users" element={<Users />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Здесь <Route element={<DashboardLayout />}> не имеет path и действует как контейнер для дочерних маршрутов users и settings. Компонент DashboardLayout будет рендериться всегда, когда совпадает путь дочернего маршрута.

Применение Outlet

<Outlet /> — это ключевой элемент pathless route. Он отвечает за рендеринг компонента дочернего маршрута. Если Outlet не использовать, дочерние маршруты не будут отображаться.

function DashboardLayout() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet />
    </div>
  );
}
  • <Outlet /> показывает компонент, соответствующий текущему маршруту.
  • Pathless route позволяет разделять контейнер (например, общий layout) и содержимое (вложенные маршруты).

Nesting и pathless routes

Pathless routes особенно полезны при глубоких вложениях. Например:

<Routes>
  <Route element={<AppLayout />}>
    <Route element={<DashboardLayout />}>
      <Route path="users" element={<Users />} />
      <Route path="settings" element={<Settings />} />
    </Route>
  </Route>
</Routes>
  • <AppLayout /> — глобальный контейнер (например, шапка и боковая панель).
  • <DashboardLayout /> — контейнер для всех маршрутов панели управления.
  • users и settings — конкретные страницы внутри панели.

Такой подход позволяет избежать дублирования кода и повторного рендеринга общих компонентов.

Использование context с pathless routes

Pathless routes удобно применять для передачи данных через Outlet:

function DashboardLayout() {
  const dashboardData = { userCount: 42 };
  
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet context={dashboardData} />
    </div>
  );
}

function Users() {
  const dashboardData = useOutletContext();
  return <div>Количество пользователей: {dashboardData.userCount}</div>;
}
  • Outlet context передает данные во все вложенные маршруты.
  • Дочерние компоненты используют useOutletContext для доступа к этим данным.

Условный рендеринг с pathless routes

Pathless route можно использовать для логики авторизации:

function ProtectedRoute({ isAuth }) {
  if (!isAuth) return <Navigate to="/login" replace />;
  return <Outlet />;
}

<Routes>
  <Route element={<ProtectedRoute isAuth={true} />}>
    <Route path="dashboard" element={<Dashboard />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>
  • ProtectedRoute не имеет path.
  • Все дочерние маршруты защищены условием.
  • Обеспечивает централизованное управление доступом.

Ключевые преимущества pathless routes

  1. Упрощение структуры маршрутов — позволяет создавать иерархию без избыточных путей.
  2. Повторное использование компонентов — общий layout или функциональность может использоваться для нескольких маршрутов.
  3. Гибкий контекст — передача данных через Outlet context.
  4. Централизованное управление логикой — авторизация, редиректы, загрузка данных.

Отличие от обычного layout route

Обычный route с path требует соответствия URL для рендеринга. Pathless route рендерится всегда при совпадении дочернего маршрута, что делает его идеальным для:

  • Общих контейнеров.
  • Условной логики для группы страниц.
  • Вложенных маршрутов без добавления новых URL сегментов.

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

Оглавление