Программная навигация React Router: useNavigate

Для программной навигации с React Router используйте хук useNavigate из react-router-dom — это самый простой способ в v6 и выше. В обработчике события, скажем, выпадающего списка, просто вызовите navigate('/новый-путь'), и страница переместится без перезагрузки. Забудьте про this.context или миксины: хуки работают везде, без лишнего boilerplate.

Содержание

• Программная навигация в React Router
• Хук useNavigate: основы и примеры
• Переход из выпадающего списка
• Что такое this.context и как его заменить
• Навигация без миксинов в функциональных и классовых компонентах
• Дополнительные опции: state, replace и назад
• Различия версий v5 и v6
• Источники
• Заключение

Программная навигация в React Router

Представьте: кликнули кнопку, выбрали опцию в меню — и бац, новая страница без ссылок. React Router navigate как раз для этого. Не ждёте рендера <Link>, а толкаете историю браузера прямо из кода.

Почему это круто? Потому что SPA оживают: формы, модалки, динамические меню. В старых версиях мучились с контекстом или миксинами, но сейчас? Один хук — и готово. Давайте разберём по полочкам.

Сначала базовый импорт. В функциональном компоненте:

import { useNavigate } from 'react-router-dom';

function MyComponent() {
 const navigate = useNavigate();
 
 const handleClick = () => {
 navigate('/profile');
 };
 
 return <button onClick={handleClick}>Перейти</button>;
}

Видишь? navigate — это функция. Передаёшь путь, и роутер сам разберётся. А если путь динамический? Легко: navigate(/user/${id}).

Хук useNavigate: основы и примеры

useNavigate react router dom — сердце современной навигации. Согласно официальной документации, он заменяет useHistory из v5 и даёт полный контроль: вперёд, назад, с параметрами.

Как получить? Импорт из 'react-router-dom', вызов в компоненте внутри <Router>. Хук работает только там — иначе ошибка.

Простой пример с react router usenavigate:

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

navigate('/about'); // Абсолютный путь
navigate('details'); // Относительный
navigate(-1); // Назад, как браузерная кнопка

Коротко. Мощно. А что с состоянием? Передавай объект: navigate('/post', { state: { from: 'list' } }). Получишь на новой странице через useLocation().state.

Но подождите, а если ошибка 404? Роутер сам кинет в <Navigate to="/not-found" replace />, если настроено. Удобно, правда?

Переход из выпадающего списка

Твой пример с селектом — классика. Без Link, чисто программная навигация react router. Вот код, который решает задачу за секунду:

import { useNavigate } from 'react-router-dom';

function Menu() {
 const navigate = useNavigate();

 return (
 <select 
 onChange={(e) => {
 navigate(e.target.value);
 }}
 defaultValue=""
 >
 <option value="" disabled>Выберите раздел</option>
 <option value="/home">Главная</option>
 <option value="/about">О нас</option>
 <option value="/profile">Профиль</option>
 </select>
 );
}

Кликнул — улетел. Никаких миксинов, никакого this.context.transitionTo. Работает в v6 идеально, как показано в статье на Hexlet.

Хочешь с заменой записи в истории? navigate(e.target.value, { replace: true }). Не засоряй стек “назад”.

А если список из API? const options = data.map(item => <option key={item.id} value={/post/${item.id}}>{item.title}</option>);. Динамика на уровне.

Что такое this.context и как его заменить

this.context — relic из прошлого. В react router v4/v5 это был объект роутера: { history, location, match }. Через this.context.history.push('/path') навигировали в классовых компонентах.

Но зачем? Контекст устарел. В v6 его убрали — теперь чистые хуки. Как пишет dev-gang.ru, this.context заменён useNavigate, useLocation, useParams.

Пример миграции:

Старое (v5 классовый):

class OldComponent extends React.Component {
 static contextType = RouterContext; // или миксин
 
 goSomewhere = () => {
 this.context.history.push('/new');
 }
}

Новое (v6 функциональный):

function NewComponent() {
 const navigate = useNavigate();
 
 const goSomewhere = () => navigate('/new');
 
 return <button onClick={goSomewhere}>Go</button>;
}

Проще вдвое. И без HOC вроде withRouter.

Навигация без миксинов в функциональных и классовых компонентах

Миксины? Пыль истории React. React Router их не любит с 15.5+. Вместо Navigation mixin — хуки или HOC.

Для функциональных: useNavigate — король. Полный доступ без лишнего.

Классовые компоненты? Оберни в withRouter (v5) или мигрируй на хуки с forwardRef. Но честно? Переходи на функциональные — жизнь проще.

Пример без миксинов для класса (v6 через HOC, но редко):

import { withRouter } from 'react-router-dom'; // Только если очень надо

class ClassComponent extends React.Component {
 handleNav = () => {
 this.props.history.push('/path'); // v5 стиль
 }
}

export default withRouter(ClassComponent);

Лучше: перепиши на хуки. В coderoad.ru подтверждают: хуки — стандарт без компромиссов.

Вопрос: а в кастомном хуке? useNavigate работает! Экспортируй useCustomNav с логикой — переиспользуй везде.

Дополнительные опции: state, replace и назад

Navigate react router dom не просто путь. Опции — огонь:

• { replace: true } — замени текущую запись, не добавляй в историю.
• { state: { message: 'Привет!' } } — передай данные, читай useLocation().state.
• Дельта: navigate(-2) — два шага назад. navigate(0, { replace: true }) — обнови текущую.

Полный вызов: navigate(to, options).

Пример с state:

navigate('/success', { 
 state: { userId: 123, timestamp: Date.now() },
 replace: true 
});

Идеально для форм: после сабмита — на дашборд с ID. А useEffect? Навигация после fetch — норма, но осторожно с циклами.

Ещё трюк: navigate('.', { replace: true }) — обнови текущий роут.

Различия версий v5 и v6

v5: useHistory().push(). v6: usenavigate react router dom. Контекст? Убран. Switch → Routes. <Redirect> → <Navigate>.

Миграция простая: замени импорт, переименуй хук. Hexlet блог детально разбирает — читай, если апгрейдишь.

v7? Пока эксперименты, но react router v6 — стабильный выбор на 2026 год. Установка: npm i react-router-dom.

Проблемы? StrictMode ломает? Добавь navigate(0) с replace.

Источники

1. Программная навигация с использованием React Router
2. Маршрутизация в React Router v6
3. useNavigate — официальная документация React Router
4. Программная навигация с помощью React Router на CodeRoad

Заключение

Программная навигация react router сводится к useNavigate — забудь миксины и this.context, хуки решают всё элегантно. Выпадающий список? Два строчки кода. State, replace, назад — нативно. Начни с v6, протестируй примеры, и твои SPA полетят. Вопросы? Погружайся в доки — там всё.