Параметры маршрута
Тема дорожной карты · React
Параметры маршрута — это динамические сегменты URL-пути, которые React Router и Next.js извлекают во время выполнения и предоставляют компонентам, позволяя одному шаблону маршрута рендерить разный контент в зависимости от URL (например, /users/:id). В React Router v6 параметры маршрута доступны через хук useParams, возвращающий запись имён параметров и их строковых значений; пользователи TypeScript могут указать обобщённый аргумент типа — useParams<{ id: string }>() — для типобезопасного доступа. Next.js предоставляет параметры маршрута через useRouter().query в Pages Router или через проп params в серверных и клиентских компонентах App Router с полной поддержкой TypeScript. Параметры маршрута отличаются от строк запроса (доступных через useSearchParams в React Router v6) и кодируются непосредственно в URL-пути, что делает их предпочтительными для идентификаторов ресурсов, которые должны быть закладываемыми и доступными для совместного использования в одностраничных приложениях. Правильная обработка параметров маршрута — включая валидацию, перенаправления для отсутствующих ресурсов и типизированный разбор параметров — является ключевым навыком для создания надёжных архитектур маршрутизации React и Next.js.
Как это работает
Параметры маршрута в 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.