Маршруты с несколькими параметрами

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

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

Для создания маршрута с несколькими параметрами необходимо использовать синтаксис с двоеточиями (:) в пути маршрута. Например:

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

const userRoute = new Route({
  path: '/users/:userId/posts/:postId',
  component: UserPost,
});

В этом примере маршрут включает два параметра: userId и postId. При переходе по URL /users/42/posts/100 значения параметров будут userId = 42 и postId = 100.

Доступ к параметрам маршрута

Параметры маршрута доступны через объект params, который предоставляется компоненту маршрута.

function UserPost({ params }) {
  return (
    <div>
      <h2>Пользователь: {params.userId}</h2>
      <p>Пост: {params.postId}</p>
    </div>
  );
}

Параметры автоматически извлекаются из URL и обновляются при навигации, что обеспечивает реактивность компонентов.

Комбинированные маршруты и вложенные параметры

TanStack Router поддерживает вложенные маршруты, где каждый уровень может иметь свои параметры. Например:

const appRouter = createRouter({
  routes: [
    new Route({
      path: '/users/:userId',
      component: UserProfile,
      children: [
        new Route({
          path: 'posts/:postId',
          component: UserPost,
        }),
      ],
    }),
  ],
});

В этом случае параметры верхнего уровня (userId) доступны и для дочернего маршрута UserPost, что позволяет использовать их совместно:

function UserPost({ params }) {
  console.log(params.userId); // параметр родителя
  console.log(params.postId); // параметр текущего маршрута
  return <div>Пользователь {params.userId}, Пост {params.postId}</div>;
}

Передача параметров при навигации

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

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

Это гарантирует корректное формирование URL независимо от текущего контекста маршрута.

Опциональные параметры и параметры с дефолтными значениями

TanStack Router позволяет определять параметры как опциональные, добавляя знак ? в пути:

new Route({
  path: '/users/:userId/posts/:postId?',
  component: UserPost,
});

В этом случае маршрут будет работать как с URL /users/42/posts, так и с /users/42/posts/100. Параметр postId в первом случае будет undefined, что позволяет динамически адаптировать отображение компонента.

Валидация и преобразование параметров

Для сложных приложений важно валидировать и преобразовывать параметры перед использованием. В TanStack Router это делается через функции parseParams и validateParams:

new Route({
  path: '/users/:userId/posts/:postId',
  component: UserPost,
  parseParams: ({ userId, postId }) => ({
    userId: Number(userId),
    postId: Number(postId),
  }),
  validateParams: ({ userId, postId }) =>
    Number.isInteger(userId) && Number.isInteger(postId),
});

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

Использование параметров в query и state

Параметры маршрута удобно сочетать с query-параметрами и состоянием маршрута. Например:

router.navigate('/users/:userId/posts/:postId', {
  params: { userId: '42', postId: '100' },
  search: { filter: 'latest' },
  state: { scrollPosition: 0 },
});

Такой подход позволяет передавать дополнительные данные, которые не входят в URL-параметры, но важны для состояния интерфейса.

Резюме по работе с несколькими параметрами

  • Параметры определяются через : в пути маршрута.
  • Доступ к параметрам осуществляется через объект params.
  • Вложенные маршруты позволяют использовать параметры родительских маршрутов.
  • Навигация с несколькими параметрами требует передачи всех значений через объект params.
  • Опциональные параметры добавляются через ? и могут быть undefined.
  • Валидация и преобразование параметров повышают безопасность и стабильность приложения.
  • Параметры маршрута можно комбинировать с query-параметрами и состоянием маршрута для полной управляемости интерфейса.

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

Оглавление