TanStack Router и React

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

Определение маршрутов

Маршруты в TanStack Router описываются с использованием объектов. Каждый маршрут может содержать path, component, loader, а также дочерние маршруты. Пример базовой структуры маршрутов:

import { createRouter, Route } from '@tanstack/router';
import Home from './pages/Home';
import About from './pages/About';
import UserProfile from './pages/UserProfile';

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
    {
      path: '/user/:id',
      component: UserProfile,
    },
  ],
});

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

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

Работа с динамическими параметрами

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

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

function UserProfile() {
  const params = useParams();
  return 
Профиль пользователя: {params.id}
;
}

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

Загрузка данных на уровне маршрутов

TanStack Router поддерживает loader — функцию, которая загружает данные перед рендерингом компонента:

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserProfile,
      loader: async ({ params }) => {
        const response = await fetch(`/api/users/${params.id}`);
        return response.json();
      },
    },
  ],
});

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

  • Выполняется до рендеринга компонента.
  • Возвращаемые данные доступны через хук useLoaderData.
  • Поддерживает асинхронные операции и интеграцию с кешированием и Suspense.
import { useLoaderData } from '@tanstack/router';

function UserProfile() {
  const user = useLoaderData();
  return 
Имя пользователя: {user.name}
;
}

Навигация между маршрутами

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

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

function NavigationButton() {
  const navigate = useNavigate();

  return (
    
  );
}

Дополнительные возможности:

  • Навигация с сохранением состояния (navigate('/path', { state: { key: 'value' } })).
  • Программное управление историей браузера.
  • Поддержка replace для замены текущего URL вместо добавления в историю.

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

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

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

function DashboardLayout() {
  return (
    

      
Панель управления

      
    

  );
}

const router = createRouter({
  routes: [
    {
      path: '/dashboard',
      component: DashboardLayout,
      children: [
        { path: 'analytics', component: AnalyticsPage },
        { path: 'settings', component: SettingsPage },
      ],
    },
  ],
});

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

  • Организация кода по функциональным областям.
  • Возможность совместного использования UI-структур (например, боковой панели или шапки).
  • Автоматическое управление состоянием дочерних маршрутов и переходов.

Ленивая загрузка компонентов

Для оптимизации производительности можно использовать React.lazy и динамические импорты с маршрутизатором:

import { lazy } from 'react';

const About = lazy(() => import('./pages/About'));

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

При этом TanStack Router корректно интегрируется с Suspense, позволяя показывать индикатор загрузки:

import { Suspense } from 'react';

Загрузка...
}>

Обработка ошибок и страницы 404

Для каждого маршрута можно определять компонент для обработки ошибок (errorComponent) или глобальный fallback:

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserProfile,
      errorComponent: UserErrorPage,
    },
  ],
  defaultErrorComponent: GlobalErrorPage,
});

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

Поддержка TypeScript

TanStack Router полностью совместим с TypeScript. Определение параметров маршрута и данных позволяет получать строгую типизацию:

type UserParams = { id: string };
type UserData = { name: string; email: string };

const userRoute = router.addRoute({
  path: '/user/:id',
  component: UserProfile,
  loader: async ({ params }: { params: UserParams }) => {
    const response = await fetch(`/api/users/${params.id}`);
    return response.json() as Promise;
  },
});

Хуки useParams и useLoaderData автоматически наследуют типы, повышая надежность кода и предотвращая ошибки на этапе компиляции.

Оглавление