React Router
Тема дорожной карты · React
React Router (пакет react-router-dom) — это де-факто библиотека клиентской маршрутизации для React-одностраничных приложений, обеспечивающая навигацию между представлениями без полной перезагрузки страницы путём синхронизации URL браузера с деревом рендерируемых компонентов. Версия 6 представила декларативный API <Routes> / <Route>, хук useNavigate для программной навигации и useParams для типобезопасного доступа к параметрам URL в сочетании с TypeScript. React Router поддерживает вложенные маршруты, маршруты-макеты, лениво загружаемые модули маршрутов через React.lazy и загрузчики данных в v6.4+, совмещающие серверную загрузку данных с определениями маршрутов. В Next.js-проектах файловый роутер заменяет react-router-dom, однако для SPA на Vite или Create React App React Router остаётся стандартным решением для маршрутизации. Понимание стека истории React Router, компонента <Link> и алгоритма сопоставления маршрутов фундаментально для создания React-приложений с насыщенной навигацией.
Как это работает
React Router в 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-конфига.
Типичные ошибки
Ловушки React Router: забыли настроить 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.