Именованные параметры

В Universal Router именованные параметры позволяют создавать гибкие маршруты с динамическими сегментами пути, которые затем могут использоваться в обработчиках маршрутов. Именованные параметры обозначаются с помощью двоеточия : перед именем параметра.

const routes = [
  {
    path: '/user/:id',
    action: ({ params }) => `Пользователь с ID: ${params.id}`
  }
];

В данном примере сегмент :id является именованным параметром. Когда роутер сопоставляет URL /user/42, объект params будет содержать:

{ id: '42' }

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

Можно использовать несколько именованных параметров в маршруте, разделяя их слэшами:

{
  path: '/product/:category/:id',
  action: ({ params }) => `Категория: ${params.category}, ID продукта: ${params.id}`
}

Для URL /product/electronics/123 результатом будет:

{ category: 'electronics', id: '123' }

Важно: Имена параметров должны быть уникальными в пределах одного маршрута. Повторение имен приведёт к непредсказуемому поведению.

Параметры с регулярными ограничениями

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

{
  path: '/order/:orderId(\\d+)',
  action: ({ params }) => `Заказ №${params.orderId}`
}

Маршрут сработает только для числовых orderId. URL /order/123 будет корректен, а /order/abc — нет.

Параметры с опциональными сегментами

Именованные параметры могут быть опциональными, если добавить знак вопроса ? после имени параметра:

{
  path: '/archive/:year/:month?',
  action: ({ params }) => `Архив за ${params.year}${params.month ? '-' + params.month : ''}`
}
  • /archive/2026/03 → { year: '2026', month: '03' }
  • /archive/2026 → { year: '2026', month: undefined }

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

Параметры с дефолтными значениями

Universal Router не поддерживает встроенные дефолтные значения напрямую, но их легко реализовать внутри action:

{
  path: '/blog/:page?',
  action: ({ params }) => {
    const page = params.page || '1';
    return `Страница блога: ${page}`;
  }
}

Здесь, если параметр page отсутствует, используется значение '1'.

Использование именованных параметров в генерации ссылок

При динамическом создании ссылок параметры удобно подставлять с помощью шаблонных строк:

function generateUserLink(userId) {
  return `/user/${userId}`;
}

generateUserLink(42); // "/user/42"

В комбинации с роутером это обеспечивает строгую согласованность между URL и обработчиками.

Погружение в объект params

Объект params содержит все именованные параметры текущего маршрута. Его можно использовать для:

  • Рендеринга данных: отображение конкретного элемента на странице
  • Логики маршрутизации: условная навигация в зависимости от параметров
  • Запросов к API: подстановка параметров в URL запроса
{
  path: '/profile/:username',
  action: ({ params }) => fetch(`/api/users/${params.username}`)
}

Ограничения и особенности

  1. Порядок маршрутов: Universal Router проверяет маршруты в порядке их определения. Если два маршрута потенциально совпадают, более конкретный должен идти первым.
  2. Чувствительность к регистру: По умолчанию пути чувствительны к регистру. /User/:id и /user/:id — разные маршруты.
  3. Вложенные маршруты: Именованные параметры передаются вниз по иерархии маршрутов, что позволяет строить сложные структуры.

Вложенные именованные параметры

Именованные параметры хорошо работают во вложенных маршрутах. Например:

const routes = [
  {
    path: '/dashboard',
    children: [
      { path: 'user/:id', action: ({ params }) => `Дашборд пользователя ${params.id}` },
      { path: 'settings', action: () => 'Настройки' }
    ]
  }
];

Для URL /dashboard/user/7 объект params будет:

{ id: '7' }

Это делает роутер удобным для SPA, где маршруты часто строятся с вложенной структурой.

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

Оглавление