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

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

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

Для начала необходимо импортировать хук из библиотеки:

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

useNavigate возвращает функцию навигации:

const navigate = useNavigate();

Эта функция позволяет переходить к указанному маршруту:

navigate('/home');

По умолчанию переход выполняется замещением текущего маршрута, добавляя новую запись в историю браузера. Для замены текущей страницы вместо добавления новой записи можно использовать объект с параметрами:

navigate('/login', { replace: true });
  • replace: true — заменяет текущую запись в истории вместо добавления новой, что удобно для перенаправлений после логина или выхода.

Передача состояния между маршрутами

useNavigate поддерживает передачу состояния между маршрутами через объект state:

navigate('/profile', { state: { fromDashboard: true } });

На целевой странице состояние можно получить с помощью хука useLocation:

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

const location = useLocation();
console.log(location.state.fromDashboard); // true

Это позволяет передавать данные между страницами без использования глобального состояния или query-параметров.

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

Программная навигация легко сочетается с динамическими маршрутами. Если маршрут объявлен с параметром:

<Route path="/user/:id" element={<UserProfile />} />

Переход к конкретному пользователю выполняется так:

navigate(`/user/${userId}`);

Для комплексных случаев с query-параметрами можно использовать шаблон URL и конкатенацию строк или URLSearchParams:

const params = new URLSearchParams({ tab: 'settings' });
navigate(`/user/${userId}?${params.toString()}`);

Обработка навигации по условию

Хук useNavigate часто используется в функциях-обработчиках событий:

const handleSubmit = async (data) => {
    const success = await sendFormData(data);
    if (success) {
        navigate('/success');
    } else {
        navigate('/error', { replace: true });
    }
};

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

Ограничения и рекомендации

  1. Навигация вне компонентов: useNavigate работает только внутри функциональных компонентов или хуков. Для навигации вне React-компонента используется альтернативный подход с объектом navigate через контекст маршрутизатора или createBrowserHistory.
  2. Асинхронные переходы: рекомендуется выполнять вызов navigate после завершения асинхронных операций, чтобы избежать перехода до получения данных.
  3. Совместимость с replace и state: параметры навигации можно комбинировать:
navigate('/dashboard', { replace: true, state: { fromLogin: true } });

Практические примеры

1. Редирект после авторизации:

const Login = () => {
    const navigate = useNavigate();

    const handleLogin = () => {
        authenticateUser().then(() => {
            navigate('/dashboard', { replace: true });
        });
    };

    return <button onCl ick={handleLogin}>Login</button>;
};

2. Переход с сохранением состояния:

const Cart = () => {
    const navigate = useNavigate();

    const checkout = () => {
        navigate('/checkout', { state: { cartItems: items } });
    };

    return <button onCl ick={checkout}>Checkout</button>;
};

3. Навигация с возвратом к предыдущей странице:

const navigate = useNavigate();

const goBack = () => {
    navigate(-1); // эквивалент browser back
};

const goForward = () => {
    navigate(1); // эквивалент browser forward
};

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

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

  • useNavigate возвращает функцию для программной навигации.
  • Поддерживает replace, передачу state и работу с динамическими маршрутами.
  • Может управлять историей браузера через числовые аргументы (-1, 1).
  • Используется внутри функциональных компонентов и хуков, подходит для событий и асинхронных действий.
  • Позволяет создавать гибкие сценарии редиректов и контролировать поток пользовательского интерфейса.
Оглавление