Инструменты разработчика для роутера

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

Devtools TanStack Router

TanStack Router Devtools — это отдельный пакет, который интегрируется с приложением и предоставляет визуальное представление всех маршрутов и состояний.

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

  • Просмотр дерева маршрутов: показывает все зарегистрированные маршруты, включая вложенные и динамические параметры.
  • Отслеживание навигаций: фиксирует историю переходов и текущий активный маршрут.
  • Состояние данных маршрута: позволяет просматривать данные, загруженные через loader или action, а также состояние асинхронных запросов.
  • Инспекция параметров: позволяет увидеть все URL-параметры, query-параметры и данные контекста, переданные маршрутам.
  • Реактивность состояния: изменения состояния роутера автоматически обновляются в интерфейсе Devtools, что облегчает отладку сложных сценариев навигации.

Установка и подключение:

npm install @tanstack/router-devtools
import { RouterDevtools } from '@tanstack/router-devtools'
import { RouterProvider } from '@tanstack/router'
import { router } from './router'

function App() {
  return (
    <RouterProvider router={router}>
      <RouterDevtools initialIsOpen={false} />
    </RouterProvider>
  )
}

initialIsOpen определяет, будет ли панель Devtools открыта по умолчанию. Панель может быть легко скрыта или раскрыта по нажатию на иконку.

Логирование навигации и состояния

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

Пример логирования всех переходов:

import { router } from './router'

router.addListener('navigation', (event) => {
  console.log('Переход:', event.to?.pathname)
  console.log('Старый маршрут:', event.from?.pathname)
})

event.to и event.from содержат объекты маршрутов, которые включают параметры, имя маршрута и загруженные данные.

Инспекция загрузчиков (loader) и действий (action)

TanStack Router позволяет асинхронно загружать данные для маршрутов через loader и обрабатывать действия через action. Devtools предоставляет возможность:

  • Проверять результат выполнения loader.
  • Отслеживать ошибки и таймауты в асинхронных запросах.
  • Понимать, какие данные уже кешированы для маршрута.

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

const userRoute = route({
  path: '/user/:id',
  loader: async ({ params }) => {
    console.log('Загрузка данных для пользователя', params.id)
    const response = await fetch(`/api/users/${params.id}`)
    if (!response.ok) throw new Error('Ошибка загрузки')
    return response.json()
  },
})

Интеграция с React DevTools

Для приложений на React TanStack Router Devtools можно интегрировать с React DevTools, что позволяет:

  • Отслеживать перерендеры компонентов в ответ на смену маршрута.
  • Проверять, какие данные передаются через useRouteLoaderData и useRouteContext.
  • Анализировать контекст маршрута и реактивные зависимости.

Отладка динамических и вложенных маршрутов

TanStack Router поддерживает глубокие вложенные маршруты и динамические сегменты URL. Devtools позволяет:

  • Визуализировать иерархию вложенных маршрутов.
  • Отследить активные сегменты URL.
  • Проверять, какие маршруты совпали и какие данные загружены для каждого сегмента.

Пример структуры вложенных маршрутов:

/
├─ dashboard
│  ├─ overview
│  └─ stats
└─ user/:id
   ├─ profile
   └─ settings

Devtools отображает это дерево, позволяя видеть активный путь и все промежуточные маршруты.

Работа с состоянием навигации

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

  • Временная навигация: позволяет отменять или повторять переходы.
  • Состояние формы и контекста: Devtools отображает все данные, связанные с формами и текущим контекстом маршрута.
  • Ошибка маршрута: если загрузчик или действие выбросили ошибку, Devtools отображает стек ошибок и параметры запроса.

Практические советы по использованию Devtools

  1. Использовать initialIsOpen=false в продакшн-приложении, чтобы Devtools не мешали пользователям.
  2. Логирование навигаций на этапе разработки помогает выявлять неожиданные редиректы.
  3. Инспекция вложенных маршрутов облегчает работу с динамическими интерфейсами, где один URL может отображать несколько компонентов одновременно.
  4. Комбинировать Devtools с React DevTools для полного анализа реактивности приложения.

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

Оглавление