useNavigate для императивной навигации

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

Импорт и базовое использование

Чтобы начать использовать useNavigate, необходимо импортировать его из react-router-dom:

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

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

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

  const goToHome = () => {
    navigate("/");
  };

  return <button onCl ick={goToHome}>На главную</button>;
}

Ключевые моменты:

  • navigate — это функция, которая принимает как путь (string), так и объект с дополнительными параметрами.
  • Путь может быть как абсолютным ("/about"), так и относительным ("../profile").

Навигация с параметрами

useNavigate поддерживает передачу состояния и замены истории:

navigate("/dashboard", { replace: true, state: { fromLogin: true } });

Пояснения к параметрам:

  • replace: true — заменяет текущую запись в истории, вместо добавления новой. Полезно для редиректов после успешной авторизации.
  • state — объект с данными, который можно получить в целевом компоненте через хук useLocation:
import { useLocation } from "react-router-dom";

function Dashboard() {
  const location = useLocation();
  console.log(location.state?.fromLogin); // true
}

Навигация по истории

Функция navigate может работать с относительными шагами истории:

navigate(-1); // возвращение на один шаг назад
navigate(1);  // переход на один шаг вперед

Эта возможность заменяет методы history.back() и history.forward(), обеспечивая интеграцию с React Router и его системой маршрутизации.

Навигация с динамическими параметрами

Для маршрутов с параметрами (:id) navigate позволяет формировать путь динамически:

function UserButton({ userId }) {
  const navigate = useNavigate();

  const openUserProfile = () => {
    navigate(`/users/${userId}`);
  };

  return <button onCl ick={openUserProfile}>Профиль пользователя</button>;
}

Если требуется добавить query-параметры, это можно сделать через URLSearchParams:

navigate(`/search?${new URLSearchParams({ q: "react" })}`);

Комбинация с асинхронными операциями

Очень часто useNavigate используют для редиректа после завершения асинхронного действия, например, отправки формы:

async function handleSubmit(data) {
  try {
    await api.submitForm(data);
    navigate("/success");
  } catch (error) {
    console.error("Ошибка отправки формы", error);
  }
}

Такой подход обеспечивает логичный пользовательский опыт, перенаправляя пользователя только после успешного завершения операции.

Относительные и абсолютные пути

  • Абсолютные пути начинаются с / и всегда рассчитываются относительно корня приложения.
  • Относительные пути формируются относительно текущего маршрута и могут использовать конструкции ../ для перехода на уровень выше:
navigate("../settings");

Важно понимать структуру маршрутов приложения, чтобы правильно использовать относительные переходы.

Интеграция с кнопками и другими событиями

useNavigate можно применять не только к кнопкам, но и к любых событиям:

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

  const handleMenuClick = (path) => {
    navigate(path);
  };

  return (
    <ul>
      <li onCl ick={() => handleMenuClick("/profile")}>Профиль</li>
      <li onCl ick={() => handleMenuClick("/logout")}>Выйти</li>
    </ul>
  );
}
  • <Link> — декларативный способ навигации через пользовательский интерфейс.
  • <Navigate> — компонент для редиректа при рендере.
  • useNavigate — императивный подход, подходящий для действий внутри функций и обработки событий.

Использование useNavigate позволяет более гибко контролировать логику переходов, интегрируя навигацию с состоянием приложения и асинхронными процессами.

Полезные рекомендации

  1. Использовать replace: true при редиректах после логина или выхода, чтобы пользователь не мог вернуться на страницу авторизации кнопкой «назад».
  2. Передавать состояние через state, если нужно сохранить контекст между маршрутами без использования глобального состояния.
  3. Применять относительные пути для удобного перемещения внутри вложенных маршрутов, сокращая жесткую привязку к абсолютным адресам.
  4. Для маршрутов с query-параметрами использовать URLSearchParams для корректного формирования строки запроса.

useNavigate предоставляет мощный инструмент для контроля маршрутов в React-приложениях, объединяя гибкость программного управления с интеграцией в систему истории браузера и архитектуру React Router.

Оглавление