useNavigate
Тема дорожной карты · React
Хук useNavigate предоставляется пакетом react-router-dom и даёт React-компонентам программный способ навигации между маршрутами без рендеринга элемента ссылки. Вызов useNavigate() внутри компонента возвращает функцию navigate, принимающую строку пути и необязательный объект параметров, что позволяет обрабатывать переходы состояния фронтенда — например, перенаправление после отправки формы или успешного входа — полностью в JavaScript. Хук useNavigate заменяет устаревший хук useHistory из React Router v5, предлагая более чистый API, согласованный с моделью хуков React. Поскольку useNavigate — это хук, он должен вызываться на верхнем уровне React-компонента или кастомного хука и не может использоваться напрямую внутри коллбэков обработчиков событий — в этих обработчиках вызывается возвращённая функция navigate. Понимание useNavigate необходимо для создания одностраничных приложений со сложными навигационными сценариями в React.
Как это работает
useNavigate в 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-конфига.
Типичные ошибки
Ловушки useNavigate: забыли настроить 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.