useNavigation для отслеживания навигации

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

Основные возможности useNavigation

Хук возвращает объект, который содержит несколько ключевых свойств:

  • state — текущее состояние навигации. Возможные значения:

    • "idle" — отсутствует переход, приложение находится в состоянии покоя;
    • "loading" — инициирован переход, данные подгружаются;
    • "submitting" — форма или данные отправляются на сервер;

  • location — объект текущей локации, аналогичный объекту location из useLocation;

  • formData — данные формы, если навигация была инициирована отправкой формы.

Это позволяет отслеживать, когда пользователь инициировал переход, а когда он завершился, и принимать решения на основе этих событий.

Пример базового использования

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

function NavigationIndicator() {
  const navigation = useNavigation();

  return (
    <div>
      {navigation.state === "loading" && <p>Загрузка...</p>}
      {navigation.state === "submitting" && <p>Отправка данных...</p>}
    </div>
  );
}

В этом примере на основе состояния navigation.state выводится индикатор процесса: либо загрузка данных при переходе, либо отправка формы.

Интеграция с формами

useNavigation особенно полезен в сочетании с компонентом <Form> из React Router. Он позволяет:

  • блокировать повторную отправку формы;
  • показывать спиннер внутри кнопки отправки;
  • сохранять состояние кнопки активной/неактивной.
import { Form, useNavigation } from "react-router-dom";

function LoginForm() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Form method="post">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Отправка..." : "Войти"}
      </button>
    </Form>
  );
}

Реакция на изменения маршрута

Хук можно использовать для запуска побочных эффектов при навигации. Например, чтобы автоматически прокручивать страницу вверх при переходе на новый маршрут:

import { useEffect } from "react";
import { useNavigation } from "react-router-dom";

function ScrollToTopOnNavigation() {
  const navigation = useNavigation();

  useEffect(() => {
    if (navigation.state === "loading") {
      window.scrollTo(0, 0);
    }
  }, [navigation.state]);

  return null;
}

Оптимизация UX с помощью состояния навигации

Использование useNavigation позволяет улучшать пользовательский опыт:

  • Динамическая блокировка кнопок — предотвращение повторной отправки данных.
  • Показ прогресс-бара — визуальная обратная связь при загрузке.
  • Асинхронная подгрузка компонентов — отображение индикатора до завершения загрузки нужного маршрута.

Совместимость с другими хуками React Router

useNavigation отлично сочетается с:

  • useLocation — для получения текущего маршрута;
  • useParams — для извлечения динамических параметров URL;
  • useNavigationType — для определения типа навигации (POP, PUSH, REPLACE).

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

Важные рекомендации по использованию

  • Не использовать useNavigation для хранения глобального состояния — он предназначен только для отслеживания текущей навигации.
  • Проверять navigation.state перед изменением интерфейса или выполнения побочных эффектов.
  • Комбинировать с индикаторами загрузки и блокировкой кнопок для предотвращения нежелательных действий.

Использование useNavigation делает поведение приложения более предсказуемым и улучшает UX при работе с формами, асинхронной подгрузкой данных и динамическими маршрутами.

Оглавление