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

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

Структура состояния роутера

Состояние роутера в TanStack Router формируется на основе дерева маршрутов, где каждый маршрут представлен объектом с набором свойств:

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

Пример базовой структуры состояния:

const routeState = {
  id: 'root',
  pathname: '/',
  params: {},
  search: {},
  loaderData: { user: { name: 'Alice' } },
  status: 'success',
  children: [
    {
      id: 'profile',
      pathname: '/profile',
      params: { userId: '123' },
      search: { tab: 'info' },
      loaderData: { profile: { age: 30 } },
      status: 'success',
      children: []
    }
  ]
};

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

Получение текущего состояния маршрута

Для инспектирования состояния используется хук useRouter или объект router, если он создаётся отдельно. Основные методы и свойства:

  • router.state.currentLocation — объект с текущим URL и параметрами.
  • router.state.matches — массив активных маршрутов, начиная от корня до текущего.
  • router.state.status — глобальный статус роутера.

Пример:

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

function RouteInspector() {
  const router = useRouter();

  console.log(router.state.currentLocation);
  console.log(router.state.matches);
  console.log(router.state.status);

  return null;
}

matches позволяет получить цепочку маршрутов, которые соответствуют текущему URL, включая все вложенные маршруты.

Слежение за изменениями состояния

TanStack Router предоставляет реактивные возможности через подписки. Это позволяет выполнять действия при изменении состояния маршрутов:

router.subscribe(({ location, matches, status }) => {
  console.log('Новый маршрут:', location.pathname);
  console.log('Активные маршруты:', matches.map(m => m.id));
  console.log('Статус роутера:', status);
});

Такой подход полезен для:

  • Логирования переходов
  • Управления анимациями при смене маршрутов
  • Отслеживания загрузки данных

Инспектирование loaderData и состояния загрузки

Каждый маршрут может иметь loader, который загружает данные асинхронно. Статус и данные можно инспектировать через matches:

router.state.matches.forEach(match => {
  console.log(`Маршрут: ${match.id}`);
  console.log(`Статус: ${match.status}`);
  console.log('Данные:', match.loaderData);
});
  • status может принимать значения: idle, loading, success, error.
  • loaderData содержит результат работы loader’а после завершения запроса.
  • Если loader находится в процессе выполнения, loaderData может быть undefined.

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

Инструменты для дебага

TanStack Router интегрируется с DevTools и предоставляет собственные методы инспекции:

  • router.inspect() — выводит полную информацию о состоянии роутера, включая активные маршруты и их данные.
  • Использование React DevTools с useRouter позволяет визуально отслеживать дерево маршрутов и текущие значения params и loaderData.

Работа с вложенными маршрутами

Каждый маршрут в дереве может содержать дочерние маршруты. Для инспекции состояния вложенных маршрутов удобно использовать рекурсивный обход matches:

function printMatches(matches, level = 0) {
  matches.forEach(match => {
    console.log(' '.repeat(level * 2) + `Маршрут: ${match.id}, Статус: ${match.status}`);
    if (match.children.length) {
      printMatches(match.children, level + 1);
    }
  });
}

printMatches(router.state.matches);

Такой подход помогает визуализировать дерево маршрутов и понимать, какие маршруты активны на разных уровнях приложения.

Использование состояния для управления UI

Инспектирование состояния напрямую влияет на интерфейс:

  • Отображение спиннеров или скелетонов на основе status.
  • Отображение сообщений об ошибках через status === 'error'.
  • Динамическая загрузка компонентов только после успешного получения loaderData.

Пример:

const CurrentPage = () => {
  const router = useRouter();
  const currentMatch = router.state.matches.at(-1);

  if (currentMatch.status === 'loading') return <Spinner />;
  if (currentMatch.status === 'error') return <ErrorMessage />;

  return <Page data={currentMatch.loaderData} />;
};

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

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

Оглавление