Index routes

Index Route — это специальный тип маршрута в React Router, который используется для отображения компонента по умолчанию, когда URL совпадает с родительским маршрутом, но не содержит дополнительных сегментов. Он особенно полезен в случаях, когда есть вложенные маршруты и необходимо определить «главную» страницу для родительского маршрута.

Основные особенности

  • Отсутствие path: Index route не требует явного указания пути. Его поведение определяется автоматически в контексте родителя.
  • Рендеринг по умолчанию: Если пользователь заходит на путь родителя и нет других совпадений, отобразится компонент index route.
  • Поддержка вложенности: Index route обычно используется внутри <Route> с дочерними маршрутами, формируя удобную структуру навигации.

Синтаксис

В React Router v6 index route задается с помощью атрибута index:

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
}

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

  • Родительский маршрут с path="/" использует компонент <Dashboard />.
  • <Home /> будет отображаться по умолчанию, так как он указан как index.
  • <About /> доступен по адресу /about.

Отличия index route от обычного маршрута

  1. Явное отсутствие пути: обычные маршруты требуют path, index route — нет.
  2. Влияние на вложенность: index route не добавляет новый сегмент URL, он рендерится как часть родителя.
  3. Приоритет совпадения: если URL совпадает с родителем, index route будет отображён только при отсутствии других дочерних маршрутов, которые подходят под текущий путь.

Пример с несколькими уровнями вложенности

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

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route index element={<Overview />} />
        <Route path="analytics" element={<Analytics />} />
        <Route path="reports" element={<Reports />} />
      </Route>
    </Routes>
  );
}
  • /dashboard → отображает <Overview /> (index route).
  • /dashboard/analytics → отображает <Analytics />.
  • /dashboard/reports → отображает <Reports />.

Важные моменты при работе с index routes

  • Не использовать path вместе с index: это приведет к ошибке. Атрибут index подразумевает отсутствие собственного сегмента пути.
  • Компоненты index route наследуют контекст родителя: props, состояния и layout родителя доступны автоматически.
  • Множественные index routes на одном уровне запрещены: только один компонент может быть index для каждого родителя.

Взаимодействие с Outlet

Index route особенно удобен вместе с <Outlet>, который обеспечивает точку рендеринга для дочерних маршрутов:

import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet /> {/* Здесь рендерятся дочерние маршруты, включая index route */}
    </div>
  );
}
  • <Outlet /> гарантирует, что index route будет отображен внутри родительского компонента.
  • Позволяет создавать гибкие layouts без дублирования кода.

Комбинация с Navigate

Index route может использоваться вместе с <Navigate> для редиректов по умолчанию:

import { Navigate } from 'react-router-dom';

<Route path="/" element={<Layout />}>
  <Route index element={<Navigate to="/home" replace />} />
  <Route path="home" element={<Home />} />
  <Route path="profile" element={<Profile />} />
</Route>
  • При заходе на / произойдет автоматический редирект на /home.
  • Удобно для маршрутов, где главная страница определяется динамически или через логику приложения.

Практические рекомендации

  • Использовать index route для «главной» страницы в рамках вложенной структуры.
  • Не дублировать функциональность обычных маршрутов, чтобы избежать путаницы.
  • Совмещать с <Outlet> и layouts для централизованного управления рендерингом дочерних компонентов.

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

Оглавление