Вложенные маршруты
Тема дорожной карты · React
Вложенные маршруты в React Router позволяют родительскому маршруту рендерить компонент макета, содержащий элемент <Outlet />, который во время выполнения заменяется компонентом совпавшего дочернего маршрута. Этот паттерн фундаментален для фронтенд-приложений, использующих общий хром — боковую панель или навигационную панель — на нескольких страницах, поскольку компонент макета рендерится один раз, изменяется только содержимое <Outlet />. В react-router-dom v6 вложенные маршруты объявляются непосредственно в дереве конфигурации маршрутов, делая связь между сегментами URL и иерархией компонентов явной и понятной. Каждый уровень вложенности добавляет сегмент URL, поэтому маршрут /dashboard/settings может быть дочерним для /dashboard и совместно использовать его макет без дублирования JSX. Вложенные маршруты в сочетании с компонентной моделью React и хуками, такими как useParams, обеспечивают модульную и поддерживаемую архитектуру маршрутизации в крупномасштабных React-приложениях.
Как это работает
Вложенные маршруты в React обычно использует React Router (react-router-dom) — де факто стандарт client-side роутинга в SPA. Маршруты объявляются декларативно: <Route path="/users/:id" element={<UserPage/>}/>. URL-параметры читаются через useParams(); программная навигация — через useNavigate(). Вложенные маршруты (<Outlet/>) композируют layouts: родительский маршрут рендерит shell + слот контента ребёнка. Data-router API (createBrowserRouter) дают loaders и actions для route-level данных и обработки форм.
Когда применять
React Router — для любого SPA с >1 URL, даже простое двухстраничное приложение яснее с объявленными маршрутами, чем со state-based switching. Вложенные маршруты — когда layouts повторяются (общий sidebar, header). Переходите на file-system routing Next.js/Remix, когда нужны SSR, RSC или встроенная загрузка данных — они заменяют React Router своим роутером. Для крошечных приложений хеш-роутинг достаточен и не требует server-конфига.
Типичные ошибки
Ловушки Вложенные маршруты: забыли настроить dev-сервер fall through на index.html (deep links дают 404 в dev); <a href> вместо <Link> (полная перезагрузка убивает SPA); fetch внутри page-компонента без интеграции с роутер-loader (waterfalls + двойной fetch при навигации); не обработан not-found (<Route path="*"/>). И server-конфиг, и dev-tool-конфиг должны иметь SPA-fallback.