Index маршруты во вложенной структуре

В React Router index маршруты представляют собой специальный тип маршрутов, которые используются для рендеринга компонента по умолчанию внутри вложенного маршрута. Они позволяют определить, какой компонент должен отображаться, когда URL соответствует пути родительского маршрута, но не содержит дополнительных сегментов. Index маршруты особенно полезны при организации вложенных структур, где необходимо иметь “главную страницу” внутри раздела.

Синтаксис index маршрута

В React Router v6 и выше index маршруты объявляются с помощью атрибута index внутри объекта маршрута:

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

function App() {
  return (
    <Routes>
      <Route path="dashboard" element={<Dashboard />}>
        <Route index element={<Overview />} />
        <Route path="reports" element={<Reports />} />
      </Route>
    </Routes>
  );
}

В этом примере:

/dashboard → рендерится Dashboard с компонентом Overview по умолчанию.
/dashboard/reports → рендерится Dashboard с компонентом Reports.

Ключевое отличие index маршрута от обычного маршрута с пустым путем (path="") заключается в том, что index маршрут не добавляет сегмента в URL и строго соответствует родительскому пути.

Вложенные структуры с index маршрутами

Index маршруты особенно эффективны при работе с вложенными структурами, где есть несколько уровней маршрутов. Например:

import { Routes, Route } from "react-router-dom";
import AppLayout from "./AppLayout";
import UsersLayout from "./UsersLayout";
import UserList from "./UserList";
import UserProfile from "./UserProfile";

function App() {
  return (
    <Routes>
      <Route path="/" element={<AppLayout />}>
        <Route path="users" element={<UsersLayout />}>
          <Route index element={<UserList />} />
          <Route path=":userId" element={<UserProfile />} />
        </Route>
      </Route>
    </Routes>
  );
}

В этой структуре:

/users → рендерится UsersLayout с компонентом UserList (index маршрут).
/users/123 → рендерится UsersLayout с компонентом UserProfile.

Использование index маршрута позволяет поддерживать логическую иерархию компонентов без дублирования кода и явного указания пустого пути.

Особенности поведения index маршрутов

Автоматическое соответствие родительскому пути Index маршрут рендерится только тогда, когда путь точно совпадает с родительским маршрутом, без дополнительных сегментов.
Не конфликтует с дочерними маршрутами Вложенные маршруты с собственными путями не блокируют рендер index маршрута, если URL полностью совпадает с родителем.
Поддержка вложенной навигации Можно создавать многоуровневые index маршруты. Например, в e-commerce приложении:

<Route path="shop" element={<ShopLayout />}>
  <Route index element={<ShopHome />} />
  <Route path="products" element={<ProductsList />} />
  <Route path="products/:productId" element={<ProductDetails />} />
</Route>

Здесь /shop рендерит ShopHome, а /shop/products и /shop/products/42 рендерят другие компоненты в том же layout.

Разница между index маршрутом и маршрутом с `path=""`

Хотя маршруты с path="" на первый взгляд похожи на index маршруты, есть важные различия:

index маршруты не влияют на URL и не требуют явно задавать путь.
Маршрут с path="" можно использовать для комбинации с другими параметрами, но index маршрут является строгим рендером по умолчанию.
В контексте вложенной структуры index маршруты делают код более читаемым и предотвращают случайное дублирование пустых путей.

Пример динамических index маршрутов

В React Router возможно использовать index маршрут вместе с динамическими сегментами родителя:

<Route path="projects/:projectId" element={<ProjectLayout />}>
  <Route index element={<ProjectOverview />} />
  <Route path="tasks" element={<TasksList />} />
  <Route path="settings" element={<ProjectSettings />} />
</Route>

/projects/1 → отображается ProjectOverview.
/projects/1/tasks → отображается TasksList.
/projects/1/settings → отображается ProjectSettings.

Index маршрут гарантирует, что базовый путь всегда имеет содержимое по умолчанию, что улучшает пользовательский опыт и навигацию.

Взаимодействие с компонентом `<Outlet />`

Index маршруты особенно эффективны при использовании <Outlet /> в родительских компонентах. <Outlet /> рендерит компонент дочернего маршрута, включая index маршрут:

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

Если URL совпадает с родительским маршрутом, <Outlet /> автоматически подставит index маршрут. Это упрощает структуру и предотвращает ручное условное отображение компонентов.