Установка и первоначальная настройка

Установка через npm или Yarn

Для начала работы с TanStack Router необходимо установить пакет через пакетный менеджер. Наиболее распространённые варианты:

npm install @tanstack/router

или

yarn add @tanstack/router

Установка добавляет библиотеку в проект и делает доступными все функции маршрутизации. Следует убедиться, что версия Node.js соответствует требованиям библиотеки (обычно Node.js >= 16).

Импорт и базовая структура

После установки библиотеку импортируют в файле конфигурации маршрутов или в главном компоненте приложения:

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

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

  • createRouter – функция для создания объекта маршрутизатора.
  • RouterProvider – компонент, через который маршрутизатор подключается к React-приложению.
  • Route – описание конкретного маршрута, его путь и сопоставленные компоненты.

Создание маршрутов

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

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

const homeRoute = new Route({
  path: '/',
  component: HomePage,
});

const aboutRoute = new Route({
  path: '/about',
  component: AboutPage,
});

const router = createRouter({
  routeTree: homeRoute.addChildren([aboutRoute])
});

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

  • path задаёт путь маршрута.
  • component указывает React-компонент, который рендерится по этому пути.
  • addChildren позволяет создавать вложенные маршруты, формируя дерево маршрутов.

Подключение маршрутизатора к приложению

После создания маршрутов необходимо обернуть корневой компонент приложения в RouterProvider:

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

function App() {
  return ;
}

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

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

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

const userRoute = new Route({
  path: '/user/:userId',
  component: UserPage,
});

В компоненте доступ к параметрам осуществляется через хук:

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

function UserPage() {
  const { userId } = useParams();
  return 
Пользователь: {userId}
;
}

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

Навигация между маршрутами осуществляется через router.navigate:

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

Или с использованием ссылок в JSX через компонент Link:

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

О нас

Настройка корневого маршрута и fallback

Рекомендуется задавать корневой маршрут (*), который срабатывает на несуществующие пути, что предотвращает ошибки 404:

const notFoundRoute = new Route({
  path: '*',
  component: NotFoundPage,
});

Интеграция с состоянием приложения

TanStack Router позволяет связывать состояние приложения с маршрутизацией через loader и action функции:

const userRoute = new Route({
  path: '/user/:userId',
  component: UserPage,
  loader: async ({ params }) => {
    const response = await fetch(`/api/users/${params.userId}`);
    return response.json();
  },
});
  • loader выполняется до рендера компонента и возвращает данные.
  • action используется для обработки POST-запросов и мутаций данных при навигации.

Поддержка TypeScript

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

interface UserParams {
  userId: string;
}

const userRoute = new Route({
  path: '/user/:userId',
  component: UserPage,
});

Это позволяет получать автодополнение и безопасную работу с параметрами маршрутов.

Оглавление