Замена useHistory на useNavigate

В React Router версии 6 и выше механизм навигации претерпел значительные изменения. Ключевым отличием является замена хука useHistory на useNavigate, что обеспечивает более упрощённый и согласованный способ управления переходами между маршрутами.

Основы useNavigate

useNavigate возвращает функцию навигации, которую можно использовать для программного перехода между страницами приложения. Синтаксис:

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

const navigate = useNavigate();

Функция navigate может принимать как строку с целевым путем, так и объект конфигурации для более тонкой настройки перехода.

Пример простого перехода:

navigate('/home');

Это полностью заменяет привычный вызов history.push('/home') из предыдущих версий.

Передача состояния и параметров

useNavigate позволяет передавать состояние через второй аргумент функции:

navigate('/profile', { state: { userId: 42 } });

Это аналогично использованию history.push('/profile', { userId: 42 }) в React Router v5. Получение состояния происходит через хук useLocation:

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

const location = useLocation();
console.log(location.state.userId);

Переход с заменой истории

Для замены текущей записи в истории (аналог history.replace) используется опция replace:

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

Это удобно для сценариев, когда после перехода назад на предыдущую страницу не требуется.

Навигация назад и вперёд

useNavigate поддерживает относительные переходы по истории:

navigate(-1); // переход назад
navigate(1);  // переход вперёд

Передача отрицательного числа соответствует history.goBack(), положительного — history.goForward().

Использование с динамическими маршрутами

Для маршрутов с параметрами useNavigate может использовать шаблоны строк с параметрами:

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

Если требуется более сложная логика генерации URL, можно комбинировать navigate с generatePath:

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

const path = generatePath("/users/:id/details", { id: 15 });
navigate(path);

Интеграция с обработчиками событий

useNavigate отлично сочетается с обработчиками событий в компонентах:

const handleClick = () => {
  navigate('/dashboard');
};

<button onCl ick={handleClick}>Перейти на панель</button>

Это устраняет необходимость оборачивать ссылки в <Link> при программной навигации и делает код более лаконичным.

Отличия от useHistory

Характеристика useHistory (v5) useNavigate (v6)
Возвращаемое значение объект history функция navigate
Переход на новый маршрут history.push('/path') navigate('/path')
Замена текущей записи history.replace('/path') navigate('/path', { replace: true })
Навигация по истории history.goBack() / history.goForward() navigate(-1) / navigate(1)
Передача состояния второй аргумент history.push второй аргумент { state }

Советы по миграции с useHistory

  1. Заменять history.push на navigate(path): большинство прямых переходов заменяются буквально.
  2. Использовать replace: true для history.replace: обеспечивает идентичное поведение.
  3. Состояние передавать через объект { state }: позволяет хранить дополнительные данные при навигации.
  4. Проверять использование методов goBack и goForward: заменить на navigate(-1) и navigate(1) соответственно.
  5. Для динамических путей использовать generatePath: облегчает работу с параметризованными маршрутами.

Эта миграция делает код чище, избавляет от громоздких объектов истории и упрощает поддержку сложных сценариев навигации.

Оглавление