Общие компоненты для вложенных маршрутов

React Router предоставляет гибкий механизм для работы с маршрутизацией в React-приложениях, особенно когда требуется организация вложенных маршрутов. Важной частью построения маршрутов является понимание и правильное использование компонентов Outlet, Routes, Route и Link.

Routes и Route

Routes — это контейнер для всех маршрутов приложения. Он обрабатывает URL и рендерит соответствующие компоненты. Каждый маршрут описывается компонентом Route.

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Dashboard from "./Dashboard";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard/*" element={<Dashboard />} />
</Routes>

Ключевые моменты:

  • path определяет путь URL.
  • element задает компонент, который будет рендериться при совпадении пути.
  • Для вложенных маршрутов важно использовать * в конце пути родительского маршрута. Это сигнализирует React Router, что в данном маршруте возможны дочерние маршруты.

Outlet

Outlet — компонент, который выступает плейсхолдером для дочерних маршрутов. Он необходим при построении вложенной структуры маршрутов.

Пример организации вложенных маршрутов:

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="stats">Статистика</Link>
        <Link to="settings">Настройки</Link>
      </nav>
      <Outlet />
    </div>
  );
}

Здесь Outlet определяет место, где будут рендериться дочерние маршруты stats и settings. Без Outlet дочерние маршруты не будут отображаться.

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

Вложенные маршруты задаются внутри родительского Route через дочерние Route.

<Routes>
  <Route path="/dashboard/*" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Особенности:

  • Дочерние маршруты указываются относительно родительского пути (stats вместо /dashboard/stats).
  • Родительский маршрут должен содержать Outlet, чтобы дочерние компоненты рендерились корректно.

Навигация между вложенными маршрутами

Для навигации внутри приложения используется компонент Link. При работе с вложенными маршрутами путь указывается относительно текущего родительского маршрута:

<Link to="stats">Перейти к статистике</Link>

Если требуется абсолютный путь, можно использовать слэш в начале:

<Link to="/dashboard/settings">Настройки</Link>

Динамические параметры в вложенных маршрутах

React Router позволяет создавать маршруты с динамическими сегментами. Это полезно для отображения страниц с идентификаторами или категориями.

<Route path="users/:userId" element={<UserProfile />} />

Доступ к параметрам маршрута осуществляется через хук useParams:

import { useParams } from "react-router-dom";

function UserProfile() {
  const { userId } = useParams();
  return <div>Профиль пользователя {userId}</div>;
}

Важно учитывать: при вложенной структуре маршрутов useParams возвращает все параметры от текущего маршрута и всех родителей.

Index Routes

Index маршруты — это маршруты, которые рендерятся по умолчанию при совпадении родительского пути.

<Route path="/dashboard/*" element={<Dashboard />}>
  <Route index element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

В данном примере при переходе на /dashboard автоматически рендерится компонент Stats.

Программная навигация

Для перехода между маршрутами программно используется хук useNavigate.

import { useNavigate } from "react-router-dom";

function Dashboard() {
  const navigate = useNavigate();

  const goToSettings = () => {
    navigate("settings");
  };

  return <button onCl ick={goToSettings}>Перейти к настройкам</button>;
}

Особенности:

  • Путь может быть относительным (settings) или абсолютным (/dashboard/settings).
  • Можно передавать состояние через объект state: navigate("settings", { state: { fromDashboard: true } }).

Совмещение Outlet с Layout-компонентами

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

function AppLayout() {
  return (
    <div>
      <header>Header</header>
      <main>
        <Outlet />
      </main>
      <footer>Footer</footer>
    </div>
  );
}

<Routes>
  <Route path="/" element={<AppLayout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="dashboard/*" element={<Dashboard />} />
  </Route>
</Routes>

Преимущество такого подхода — повторное использование интерфейсных компонентов без дублирования кода.

Советы по оптимизации вложенной маршрутизации

  • Использовать * в конце пути родительского маршрута для поддержки всех вложенных путей.
  • Разделять Layout и контентные компоненты для более чистой архитектуры.
  • Динамические маршруты и параметры объединять с useParams для корректного получения данных.
  • Index-маршруты применять для отображения стандартного контента на уровне родителя.

Эти компоненты и подходы создают фундамент для построения масштабируемой и удобной вложенной маршрутизации в React-приложениях.

Оглавление