Типы маршрутов: статические и динамические

Статические маршруты в TanStack Router представляют собой маршруты с фиксированным путем, который не изменяется в зависимости от параметров или состояния приложения. Они идеально подходят для страниц, которые всегда имеют одинаковый URL, например, /about, /contact или /dashboard.

Определение статического маршрута выполняется через объект маршрута:

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

const routeConfig = createRouteConfig()
  .createRoute({
    path: '/about',
    component: AboutPage,
  });

const router = createRouter({ routeConfig });

В этом примере AboutPage будет отображаться каждый раз, когда URL точно соответствует /about.

Преимущества статических маршрутов:

  • Простота реализации и понимания.
  • Предсказуемость URL-адресов.
  • Идеальны для страниц, которые не требуют данных из параметров.

Ограничения статических маршрутов:

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

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

Динамические маршруты позволяют использовать параметры в URL, которые могут меняться в зависимости от контекста. Параметры обозначаются через двоеточие : перед именем переменной в пути. Например, маршрут /users/:userId может отображать разные страницы профиля в зависимости от userId.

Пример определения динамического маршрута:

const routeConfig = createRouteConfig()
  .createRoute({
    path: '/users/:userId',
    component: UserProfilePage,
  });

const router = createRouter({ routeConfig });

В этом случае UserProfilePage получает доступ к параметру userId через объект useParams:

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

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

Ключевые особенности динамических маршрутов:

  • Позволяют создавать шаблонные маршруты, сокращая количество кода.
  • Поддержка вложенных динамических маршрутов, например /users/:userId/posts/:postId.
  • Совместимость с генерацией ссылок: маршруты можно строить программно, подставляя параметры через router.navigate.

Пример навигации с параметрами:

router.navigate({ to: '/users/:userId', params: { userId: 42 } });

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

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

const routeConfig = createRouteConfig()
  .createRoute({
    path: '/users',
    component: UsersPage,
    children: [
      {
        path: ':userId',
        component: UserProfilePage,
        children: [
          { path: 'posts', component: UserPostsPage }
        ],
      },
    ],
  });

В этом примере /users — статический маршрут, /users/:userId — динамический, а /users/:userId/posts — вложенный маршрут динамического типа.

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

  • Возможность разделять логику и компоненты на уровне иерархии.
  • Каждый уровень маршрута может иметь собственные loader’ы, guards и action’ы.
  • Легкая интеграция с code splitting, загружая компоненты только при необходимости.

Параметры маршрутов и типизация

Для динамических маршрутов важно корректно работать с параметрами. TanStack Router поддерживает строгую типизацию:

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

type Params = { userId: string };

const userRoute: Route = routeConfig.createRoute({
  path: '/users/:userId',
  component: UserProfilePage,
});

Типизация параметров обеспечивает:

  • Автодополнение при навигации через router.navigate.
  • Проверку корректности параметров на этапе компиляции.
  • Уменьшение ошибок при передаче значений в компоненты.

Разграничение применения

Статические маршруты стоит использовать для:

  • Главных страниц (Home, About, Contact).
  • Статических информационных разделов.

Динамические маршруты актуальны для:

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

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

Оглавление