Компонент Router и его настройка

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

Создание Router

Router создается с помощью функции createRouter, которая принимает объект конфигурации маршрутов:

import { createRouter } from '@tanstack/router'

const router = createRouter({
  routes: [
    {
      path: '/',
      component: HomePage,
    },
    {
      path: '/about',
      component: AboutPage,
    },
  ],
})

Ключевые моменты:

  • path — строка URL маршрута. Поддерживаются динамические сегменты (/users/:userId).
  • component — React-компонент, который будет рендериться при совпадении маршрута.
  • Все маршруты могут быть вложенными, создавая древовидную структуру.

Динамические маршруты и параметры

TanStack Router позволяет определять параметры прямо в пути:

{
  path: '/users/:userId',
  component: UserProfile,
}

Параметры можно получить через хук useParams:

import { useParams } from '@tanstack/router'

function UserProfile() {
  const params = useParams()
  console.log(params.userId)
  return <div>Профиль пользователя {params.userId}</div>
}

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

Вложенные маршруты и Outlet

Router поддерживает вложенные маршруты через свойство children:

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: 'stats', component: StatsPage },
    { path: 'settings', component: SettingsPage },
  ],
}

Для рендеринга дочерних маршрутов используется компонент Outlet:

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet />
    </div>
  )
}

Особенности:

  • Вложенные маршруты наследуют путь родителя.
  • Outlet обеспечивает точку вставки для дочерних компонентов маршрутов.

Асинхронная загрузка данных

TanStack Router позволяет асинхронно загружать данные на уровне маршрута с помощью свойства loader:

{
  path: '/posts/:postId',
  component: PostPage,
  loader: async ({ params }) => {
    const response = await fetch(`/api/posts/${params.postId}`)
    return response.json()
  },
}

Данные, возвращаемые loader, можно получить через хук useLoaderData:

import { useLoaderData } from '@tanstack/router'

function PostPage() {
  const post = useLoaderData()
  return <div>{post.title}</div>
}

Преимущества:

  • Централизация загрузки данных на уровне маршрута.
  • Поддержка асинхронного рендеринга и предварительной загрузки данных.

Настройка истории и навигации

Router использует историю браузера для управления навигацией. Поддерживаются два режима:

  • browserHistory — стандартная история HTML5.
  • memoryHistory — используется для тестов и серверного рендеринга.

Пример создания Router с history:

import { createBrowserHistory } from '@tanstack/router'

const router = createRouter({
  history: createBrowserHistory(),
  routes: [
    { path: '/', component: HomePage },
  ],
})

Для программной навигации применяется метод router.navigate:

router.navigate({ to: '/about' })

Особенности:

  • Можно передавать параметры и query-параметры.
  • Навигация работает асинхронно, совместно с loader и хуками жизненного цикла маршрута.

Настройка поведения при ошибках

Router поддерживает обработку ошибок на уровне маршрута с помощью свойства errorComponent:

{
  path: '/posts/:postId',
  component: PostPage,
  loader: async ({ params }) => {
    const response = await fetch(`/api/posts/${params.postId}`)
    if (!response.ok) throw new Error('Post not found')
    return response.json()
  },
  errorComponent: PostErrorPage,
}

Особенности:

  • Ошибки loader или рендеринга дочернего маршрута автоматически отображаются через errorComponent.
  • Можно использовать глобальные error boundaries для всего Router.

Хуки жизненного цикла маршрута

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

  • onBeforeLoad — вызывается перед загрузкой маршрута.
  • onLoad — после успешной загрузки данных маршрута.
  • onUnload — перед выходом с маршрута.

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

{
  path: '/profile',
  component: ProfilePage,
  onBeforeLoad: ({ params }) => {
    console.log('Перед загрузкой профиля', params)
  },
  onLoad: ({ loaderData }) => {
    console.log('Профиль загружен', loaderData)
  },
}

Эти хуки помогают управлять состоянием приложения, предварительно проверять права доступа и делать логирование навигации.

Заключение по настройке Router

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

  • Создание дерева маршрутов.
  • Настройку history и навигации.
  • Использование loader и errorComponent для асинхронных сценариев.
  • Применение хуков жизненного цикла для управления поведением маршрутов.

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

Оглавление