Инспекция состояния роутера

Основные объекты состояния маршрутизации

В React Router ключевую роль играет объект location, который описывает текущее положение пользователя в приложении. Он содержит следующие поля:

  • pathname — путь текущего URL, например /products/42.
  • search — строка запроса, начинающаяся с ?, например ?category=books.
  • hash — часть URL после символа #.
  • state — объект, позволяющий передавать данные между переходами.
  • key — уникальный идентификатор текущего состояния, который используется для управления историей.

Для доступа к объекту location используется хук useLocation():

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

function CurrentLocation() {
  const location = useLocation();
  console.log(location.pathname); // выводит текущий путь
  console.log(location.state);    // выводит состояние маршрута
}

Кроме location, важен объект history (в React Router v6 заменён на методы navigate и useNavigate()), который управляет переходами:

  • navigate('/path') — программный переход на другой маршрут.
  • navigate(-1) — возвращение на предыдущую страницу.
  • navigate(1) — переход вперёд в истории.

Хуки для инспекции состояния

useParams()

Используется для получения параметров динамических маршрутов. Например, маршрут /users/:id:

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

function UserPage() {
  const { id } = useParams();
  return 
Пользователь с ID: {id}
;
}
useLocation()

Позволяет инспектировать текущий URL и данные состояния:

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

function QueryLogger() {
  const location = useLocation();
  console.log(new URLSearchParams(location.search).get('q'));
  return null;
}
useMatch()

Позволяет проверять, соответствует ли текущий путь определённому шаблону:

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

function HighlightIfMatch() {
  const match = useMatch('/dashboard');
  return match ? Вы на панели : Не панель;
}
useNavigationType()

Возвращает тип перехода: POP, PUSH или REPLACE, что полезно для логики, зависящей от способа навигации.

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

function LogNavigation() {
  const navType = useNavigationType();
  console.log(navType);
}

Инспекция состояния вложенных маршрутов

Вложенные маршруты создаются с помощью компонента и маршрутов, определённых в массиве конфигурации. Для проверки текущего состояния вложенного маршрута можно использовать комбинацию useMatch и useLocation.

import { useMatch, Outlet } from 'react-router-dom';

function Parent() {
  const match = useMatch('/parent/:childId');
  return (
    

      {match && 
Текущий дочерний ID: {match.params.childId}
}
      
    

  );
}

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

С помощью объекта state можно передавать данные при навигации:

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

function NavigateWithState() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/profile', { state: { fromDashboard: true } });
  };
  return ;
}

Доступ к переданным данным осуществляется через useLocation:

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

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

Отслеживание изменений состояния роутера

Для реакции на изменения маршрута можно использовать useEffect совместно с useLocation:

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

function LocationWatcher() {
  const location = useLocation();

  useEffect(() => {
    console.log('URL изменился на:', location.pathname);
  }, [location]);
}

Это позволяет реализовывать логику, аналогичную слушателям истории в классическом React Router v5, но с использованием современных хуков.

Инспекция состояния без хуков

Для классовых компонентов можно использовать компонент withRouter (React Router v5) или с element-функцией в v6:

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

function LocationDisplay({ location }) {
  return 
Текущий путь: {location.pathname}
;
}

Или с элементом-функцией:


  } />

В этом случае Example может использовать useLocation, useParams и другие хуки для инспекции состояния.

Работа с ключами и управлением историей

Каждое состояние в истории имеет уникальный key. Это позволяет различать разные экземпляры одного и того же пути:

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

function KeyLogger() {
  const location = useLocation();
  console.log('Ключ состояния:', location.key);
}

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

Доступ к маршрутам и их статусу в конфигурации

React Router v6 предоставляет утилиты matchRoutes и generatePath:

  • matchRoutes(routesConfig, pathname) — возвращает массив совпадений маршрутов с текущим URL.
  • generatePath('/users/:id', { id: 42 }) — формирует URL из шаблона и параметров.
import { matchRoutes, generatePath } from 'react-router-dom';

const matches = matchRoutes(routes, '/users/42');
console.log(matches);

const path = generatePath('/users/:id', { id: 42 });
console.log(path); // /users/42

Эти методы помогают программно инспектировать маршруты и их состояние без непосредственного рендеринга компонентов.

Оглавление