useRouterState для чтения состояния

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

Синтаксис и базовое использование

import { useRouterState } from '@tanstack/router';

const routerState = useRouterState();

После вызова хука routerState становится объектом с ключевыми свойствами:

  • location — текущий объект URL, содержащий путь (pathname) и параметры поиска (search).
  • params — объект с динамическими параметрами текущего маршрута.
  • search — объект, представляющий query-параметры URL.
  • status — состояние загрузки маршрута (idle, loading, error, success).
  • route — текущий активный маршрут.
  • matches — массив маршрутов, которые соответствуют текущему пути, с вложенными данными.

Доступ к параметрам маршрута

Динамические сегменты маршрутов, например /users/:userId, автоматически становятся доступными через params.

const { params } = useRouterState();
console.log(params.userId); // выводит значение :userId из URL

Если маршрут имеет вложенные параметры, они также будут включены в объект params по ключу каждого сегмента.

Работа с query-параметрами

Query-параметры URL удобно получать через объект search.

const { search } = useRouterState();
console.log(search.page); // выводит значение ?page=... из URL

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

Слежение за состоянием загрузки маршрута

Свойство status позволяет отслеживать состояние асинхронных данных, связанных с маршрутом. Возможные значения:

  • idle — маршрут еще не загружался
  • loading — данные маршрута в процессе загрузки
  • error — произошла ошибка при загрузке
  • success — данные успешно загружены
const { status } = useRouterState();

if (status === 'loading') {
  return <div>Загрузка...</div>;
}

if (status === 'error') {
  return <div>Ошибка загрузки данных</div>;
}

Доступ к текущему маршруту и цепочке совпадений

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

const { route, matches } = useRouterState();
console.log(route.id); // уникальный идентификатор текущего маршрута
console.log(matches.map(m => m.route.id)); // все маршруты в цепочке совпадений

Каждый элемент matches содержит:

  • route — сам маршрут
  • params — параметры этого маршрута
  • search — query-параметры, действующие на этом уровне маршрута
  • status — состояние загрузки для конкретного маршрута

Практическая интеграция с React-компонентами

useRouterState идеально подходит для компонентов, которые должны реагировать на изменение URL без повторного рендера всего приложения. Например:

function UserProfile() {
  const { params, status } = useRouterState();

  if (status === 'loading') return <p>Загрузка профиля...</p>;

  return <p>ID пользователя: {params.userId}</p>;
}

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

Оптимизация производительности

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

Резюме ключевых возможностей

  • Реактивный доступ к параметрам маршрута и query-параметрам
  • Слежение за состоянием загрузки маршрута (idle, loading, error, success)
  • Доступ к текущему маршруту и цепочке совпадений
  • Мемоизация объектов для оптимизации рендеров

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

Оглавление