Маршрутизация
Тема дорожной карты · React
Маршрутизация в React — это механизм, сопоставляющий URL-пути с конкретными компонентами и обеспечивающий навигацию в одностраничных приложениях (SPA) без полной перезагрузки браузера. Клиентская маршрутизация чаще всего реализуется с помощью библиотеки react-router-dom, которая поддерживает стек истории в браузере и перерендеривает дерево компонентов, совпавших с маршрутом, при каждом изменении URL. В Next.js маршрутизация основана на файловой системе: файлы, размещённые в директории pages/ (Pages Router) или app/ (App Router), автоматически определяют маршруты без какой-либо ручной настройки. Концепции маршрутизации React включают статические маршруты, динамические маршруты с параметрами, вложенные маршруты, защищённые маршруты (охраняемые проверками аутентификации) и лениво загружаемые маршруты с использованием React.lazy для разделения кода и улучшения производительности фронтенда. Выбор правильной стратегии маршрутизации — клиентская SPA-маршрутизация, SSR с Next.js или SSG — существенно влияет на SEO, управление состоянием и общую архитектуру 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.