Wildcard-маршруты и обработка 404

В React Router wildcard-маршруты используются для обработки динамических или неизвестных URL. Они позволяют задать универсальный маршрут, который срабатывает, когда ни один из перечисленных маршрутов не совпадает с текущим путём. Чаще всего это используется для реализации страницы 404, но также полезно для маршрутов с переменной глубиной.

Синтаксис wildcard-маршрута

Wildcard обозначается символом *. В React Router v6 и выше он применяется следующим образом:

import { Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import NotFoundPage from './NotFoundPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}
  • path="*" — означает, что этот маршрут будет совпадать со всеми путями, которые не были обработаны предыдущими маршрутами.
  • element={<NotFoundPage />} — компонент, который рендерится, когда URL не соответствует ни одному из заданных маршрутов.

Обработка вложенных wildcard-маршрутов

Wildcard можно использовать не только для верхнего уровня, но и внутри вложенных маршрутов. Это позволяет создавать страницы с динамическим содержимым или универсальные fallback-компоненты для вложенных секций.

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

В данном примере:

  • Если пользователь перейдёт на /dashboard/stats, будет показан компонент Stats.
  • Любой другой путь внутри /dashboard, например /dashboard/reports, отрендерит компонент DashboardNotFound.

Использование параметров с wildcard

Wildcard можно сочетать с динамическими параметрами для более гибкой маршрутизации. Например, для маршрута с произвольным количеством сегментов URL:

<Route path="/files/*" element={<FilesPage />} />

В компоненте FilesPage можно получить оставшийся путь с помощью хука useParams или useLocation:

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

function FilesPage() {
  const location = useLocation();
  const subPath = location.pathname.replace('/files/', '');
  return <div>Текущий путь: {subPath}</div>;
}

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

Особенности работы 404-страницы

  1. Порядок маршрутов важен — React Router проверяет маршруты сверху вниз. Маршрут с * должен идти последним, иначе он перехватит все запросы.
  2. Комбинация с вложенными маршрутами — wildcard в вложенном маршруте обрабатывает только путь в пределах родительского маршрута.
  3. Переадресация на 404 — можно использовать компонент Navigate для перенаправления на 404-путь:
import { Navigate } from 'react-router-dom';

<Route path="*" element={<Navigate to="/not-found" replace />} />

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

  • Для верхнего уровня приложения всегда оставлять один wildcard-маршрут для глобальной страницы 404.
  • Для вложенных маршрутов использовать отдельные wildcard-компоненты для обработки ошибок в пределах конкретного раздела.
  • При работе с динамическими URL и многосегментными путями комбинировать wildcard с useParams или useLocation для точного получения и обработки оставшейся части маршрута.

Примеры использования wildcard для динамических маршрутов

  1. Многоуровневые пути блога:
<Route path="/blog/*" element={<BlogPage />} />

В компоненте BlogPage можно обрабатывать URL вида /blog/category/post-title.

  1. Обработка произвольных ссылок в приложении:
<Route path="*" element={<GenericNotFound />} />
  • Позволяет гарантированно показывать fallback-контент, даже если структура маршрутов меняется или добавляются новые страницы.
  1. Комбинированные подходы:
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/products/*" element={<Products />} />
  <Route path="*" element={<PageNotFound />} />
</Routes>
  • Такой подход обеспечивает, что все неизвестные маршруты попадут на компонент PageNotFound, а подмаршруты /products/* обрабатываются отдельно.

Wildcard-маршруты в React Router обеспечивают мощный инструмент для гибкой маршрутизации и корректной обработки ошибок. Они позволяют создавать универсальные страницы 404, поддерживать динамические пути и управлять вложенными маршрутами без лишней сложности.

Оглавление