Базовая навигация между страницами

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

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

Маршруты в TanStack Router задаются объектами, где ключевыми свойствами являются path, component и children.

import { createRouter, RouterProvider } from '@tanstack/router';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import UserPage from './pages/UserPage';

const router = createRouter({
  routes: [
    {
      path: '/',
      component: HomePage,
    },
    {
      path: '/about',
      component: AboutPage,
    },
    {
      path: '/user/:userId',
      component: UserPage,
    },
  ],
});
  • path задаёт URL-адрес маршрута. Параметры пути обозначаются с помощью : (например, :userId).
  • component — React-компонент, который будет отрисован при совпадении маршрута.
  • children — массив вложенных маршрутов, поддерживающий иерархическую структуру приложения.

Подключение RouterProvider

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <RouterProvider router={router}>
    <App />
  </RouterProvider>,
  document.getElementById('root')
);

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

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

Для навигации используется хук useNavigate или компонент <Link>.

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

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

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

  return (
    <button onCl ick={() => navigate('/about')}>
      Перейти на страницу «О нас»
    </button>
  );
}

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

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

function Menu() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
      <Link to="/user/123">Профиль пользователя</Link>
    </nav>
  );
}

<Link> автоматически предотвращает перезагрузку страницы и корректно обновляет состояние маршрутизатора.

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

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

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

function UserPage() {
  const { userId } = useParams();
  return <div>Профиль пользователя: {userId}</div>;
}

Каждый динамический параметр пути доступен как свойство объекта, возвращаемого useParams.

Обработка вложенных маршрутов

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

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

Вложенные маршруты рендерятся через компонент Outlet:

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

function DashboardLayout() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet />
    </div>
  );
}

Outlet отображает компонент текущего дочернего маршрута, сохраняя структуру родителя.

Навигация с состоянием и query-параметрами

TanStack Router поддерживает передачу состояния и query-параметров при переходах. Для этого можно использовать объект в navigate или Link:

navigate('/user/123', { state: { fromDashboard: true }, search: { tab: 'profile' } });
  • state передаёт данные между страницами без изменения URL.
  • search позволяет задавать query-параметры, доступные через useSearchParams.
import { useSearchParams } from '@tanstack/router';

function UserPage() {
  const [searchParams] = useSearchParams();
  const tab = searchParams.get('tab');
  return <div>Активная вкладка: {tab}</div>;
}

Программная и условная навигация

Навигация может выполняться программно в ответ на события, проверки авторизации или завершение операций:

if (!user.isLoggedIn) {
  navigate('/login', { replace: true });
}

Опция replace: true позволяет заменить текущий URL в истории браузера без добавления нового шага.

Основные преимущества подхода TanStack Router

  • Полная типизация для TypeScript-проектов.
  • Лёгкая интеграция с React-компонентами и хуками.
  • Поддержка вложенных маршрутов и динамических сегментов.
  • Синхронизация состояния URL, query-параметров и состояния приложения.
  • Возможность программной навигации с передачей состояния между страницами.

Эти возможности делают библиотеку гибким инструментом для построения сложной клиентской навигации без громоздкой конфигурации.

Оглавление