useNavigationType для определения типа навигации

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

Основные значения, возвращаемые useNavigationType

  • POP Указывает, что переход был вызван действиями истории браузера, например кнопками «Назад» или «Вперед». Этот тип навигации не изменяет историю явно через код, а является результатом встроенных возможностей браузера.

  • PUSH Отражает переход, инициированный через навигацию программно с добавлением нового элемента в стек истории. Обычно вызывается через <Link> или функцию navigate("/path") без параметра replace.

  • REPLACE Указывает на замену текущего элемента истории без добавления нового. Этот тип навигации возникает при вызове navigate("/path", { replace: true }), что полезно для редиректов или обновления URL без создания дополнительного шага в истории.

Подключение и использование

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

function NavigationLogger() {
  const navigationType = useNavigationType();

  console.log("Тип навигации:", navigationType);

  return null;
}

В этом примере navigationType всегда содержит актуальное значение последнего перемещения по маршрутам. Можно использовать это значение для различных целей: аналитики, анимации переходов или условного рендера компонентов.

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

  1. Аналитика и логирование действий пользователя
import { useEffect } from 'react';
import { useNavigationType } from 'react-router-dom';

function AnalyticsTracker() {
  const navigationType = useNavigationType();

  useEffect(() => {
    // Отправка события в систему аналитики
    console.log("Пользователь совершил навигацию через:", navigationType);
  }, [navigationType]);

  return null;
}
  1. Управление поведением компонентов при возврате назад
import { useNavigationType } from 'react-router-dom';

function BackAwareComponent() {
  const navigationType = useNavigationType();

  if (navigationType === 'POP') {
    // Например, сброс формы при возврате
    console.log("Пользователь вернулся на предыдущую страницу");
  }

  return null;
}
  1. Анимации переходов между страницами

Тип навигации можно использовать для выбора направления анимации: при PUSH — анимация входа новой страницы, при POP — анимация возврата к предыдущей.

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

function PageTransition() {
  const navigationType = useNavigationType();

  const animationClass = navigationType === 'POP' ? 'slide-back' : 'slide-forward';

  return <div className={animationClass}>Содержимое страницы</div>;
}

Важные нюансы

  • Хук useNavigationType всегда возвращает актуальное состояние навигации, но не отслеживает все предыдущие перемещения. Для работы с историей переходов потребуется использование useLocation и сравнение key маршрута.
  • Он полезен для условной логики, зависящей от способа перемещения, например, чтобы избежать повторного выполнения побочных эффектов при возврате назад.
  • Совместное использование с useEffect позволяет реагировать на каждое изменение типа навигации и выполнять необходимые операции только при определённых условиях.

Советы по интеграции

  • Использовать для аналитики, чтобы отличать прямые переходы от возвратов и замен.
  • Применять в сочетании с контекстом состояния, чтобы правильно управлять сохранёнными данными форм или страниц.
  • Для сложных приложений сочетать с useLocation и useNavigation для полной картины навигации и контроля анимаций.

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

import { useEffect } from 'react';
import { useNavigationType, useLocation } from 'react-router-dom';

function NavigationHandler() {
  const navigationType = useNavigationType();
  const location = useLocation();

  useEffect(() => {
    switch (navigationType) {
      case 'PUSH':
        console.log("Новая страница добавлена в историю:", location.pathname);
        break;
      case 'REPLACE':
        console.log("Текущая страница заменена на:", location.pathname);
        break;
      case 'POP':
        console.log("Пользователь вернулся/вперёд:", location.pathname);
        break;
    }
  }, [navigationType, location]);

  return null;
}

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

Оглавление