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

Программная навигация — это способ изменять текущий URL и переключать экраны не через клик по <Link>, а из кода компонента. Это необходимо, когда переход должен происходить в ответ на действие пользователя (например, отправка формы) или системное событие (например, успешная авторизация).

Хук `useNavigate()`

Для программной навигации в React Router v6 используется хук useNavigate(). Он возвращает функцию, которую можно вызвать для перехода на другой маршрут.

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

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

  const handleLogin = () => {
    // имитация успешной авторизации
    navigate('/dashboard');
  };

  return (
    <button onClick={handleLogin}>
      Войти
    </button>
  );
}

Основные сценарии использования

Переход на новый путь

navigate('/profile');

Добавляет новую запись в историю браузера (как обычный клик по ссылке).

Замена текущей записи в истории

navigate('/home', { replace: true });

Полезно после логина или логаута, чтобы пользователь не мог вернуться назад на страницу входа кнопкой «Назад».

Возврат назад

navigate(-1);

Аналог кнопки «Назад» в браузере. Можно также использовать navigate(1) для перехода вперёд.

Когда использовать

После успешной отправки формы (например, создания заказа);
При автоматическом перенаправлении (например, если пользователь не авторизован);
В обработчиках ошибок (например, переход на страницу 404 при отсутствии данных);
В модальных окнах или всплывающих уведомлениях, где нет возможности использовать <Link>.

Ограничения

Функция navigate должна вызываться только внутри компонента, обёрнутого в <BrowserRouter>. Вызов вне дерева маршрутизации приведёт к ошибке.

Также не рекомендуется вызывать navigate напрямую в теле компонента (на этапе рендеринга), так как это может вызвать побочные эффекты. Используйте его только в обработчиках событий или внутри useEffect при определённых условиях.