Что такое router context

Router Context в TanStack Router — это ключевой элемент, обеспечивающий доступ к состоянию маршрутизатора и его функциям на любом уровне компонента. Он создаёт единый источник правды для маршрутов, позволяя компонентам реагировать на изменения URL, управлять навигацией и работать с параметрами маршрутов. Контекст создаётся автоматически при инициализации маршрутизатора через <RouterProvider> и распространяется по всему дереву React-компонентов.

Создание и использование Router Context

Чтобы использовать Router Context, необходимо создать экземпляр маршрутизатора:

import { createRouter, RouterProvider } from '@tanstack/router'

const router = createRouter({
  // определение маршрутов
})

Далее маршрутизатор оборачивается в провайдер:

<RouterProvider router={router}>
  <App />
</RouterProvider>

RouterProvider автоматически создаёт контекст, доступный через хуки и компонентные API TanStack Router. Это позволяет любому компоненту внутри <RouterProvider> получать актуальные данные маршрутизатора, такие как текущий путь, параметры, состояние загрузки и т.д.

Основные возможности Router Context

  1. Доступ к текущему маршруту Контекст хранит объект текущего маршрута, который содержит:

    • pathname — текущий путь URL;
    • params — параметры маршрута, извлечённые из URL;
    • search — строка запроса;
    • hash — хеш URL.

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

import { useRouter } from '@tanstack/router'

function CurrentRouteInfo() {
  const router = useRouter()
  return (
    <div>
      <p>Текущий путь: {router.state.location.pathname}</p>
      <p>Параметры: {JSON.stringify(router.state.params)}</p>
    </div>
  )
}

  1. Навигация через контекст Router Context предоставляет методы для программной навигации:

    • router.navigate('/new-path') — переход на новый путь;
    • router.history.back() — возврат на предыдущий маршрут;
    • router.history.forward() — переход вперёд в истории.

    Пример программной навигации:

function GoHomeButton() {
  const router = useRouter()
  
  return <button onCl ick={() => router.navigate('/')}>На главную</button>
}
  1. Состояние загрузки маршрута Контекст хранит состояние асинхронных загрузок для маршрутов с loader или action. Доступ к состоянию позволяет компонентам отображать индикаторы загрузки или ошибки:
const { isLoading, error } = useRouter()
if (isLoading) return <div>Загрузка...</div>
if (error) return <div>Ошибка: {error.message}</div>

Глубокая интеграция с дочерними компонентами

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

import { useMatch } from '@tanstack/router'

function UserProfile() {
  const match = useMatch('/users/:userId')
  return <div>Пользователь: {match.params.userId}</div>
}

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

Пользовательские контексты поверх Router Context

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

import { createContext, useContext } from 'react'

const UserContext = createContext(null)

function UserProvider({ children, user }) {
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}

function UserInfo() {
  const user = useContext(UserContext)
  return <div>Имя пользователя: {user.name}</div>
}

Комбинирование собственного контекста с Router Context позволяет создавать сложные маршрутизируемые приложения с минимальной связностью компонентов.

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

  • Централизация состояния маршрутизатора: все данные маршрутов и методы навигации доступны в любом компоненте.
  • Реактивность: компоненты автоматически обновляются при изменении пути, параметров или состояния загрузки.
  • Простая интеграция с хуками: useRouter, useMatch, useParams обеспечивают удобный доступ к контексту.
  • Поддержка асинхронных маршрутов: loader и action напрямую интегрируются в контекст.
  • Расширяемость: пользовательские контексты можно сочетать с Router Context для хранения дополнительного состояния.

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

Оглавление