Параметр path и его значения

В библиотеке Universal Router параметр path является ключевым элементом маршрута. Он определяет, каким образом URL запроса сопоставляется с определённым маршрутом. Понимание синтаксиса path и вариантов его значений критично для построения сложных маршрутизаторов в JavaScript.

Строковые значения path

Наиболее простая форма — строка, которая указывает точный путь:

{
  path: '/home',
  action: () => 'Главная страница'
}

В этом случае маршрут срабатывает только для URL /home. Совпадение строгое, символы и слэши должны полностью соответствовать указанному пути.

Параметры пути

Universal Router поддерживает динамические параметры, которые задаются через двоеточие :. Такой подход позволяет обрабатывать переменные части URL.

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

Здесь :id — параметр, значение которого извлекается автоматически и передаётся в объект params. Например, URL /user/42 вернёт params.id = "42".

  • Параметры могут быть обязательными (как выше) или необязательными, если использовать знак вопроса ?:
{
  path: '/user/:id?',
  action: ({ params }) => params.id ? `ID: ${params.id}` : 'Все пользователи'
}
  • Параметры можно комбинировать:
{
  path: '/post/:postId/comment/:commentId',
  action: ({ params }) => `Пост ${params.postId}, комментарий ${params.commentId}`
}

Группы и регулярные выражения в пути

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

{
  path: '/product/:id(\\d+)',
  action: ({ params }) => `Продукт с числовым ID: ${params.id}`
}

В этом примере параметр id должен состоять только из цифр. URL /product/abc не сработает, а /product/123 будет корректным.

Пустой путь и маршруты по умолчанию

Маршруты могут иметь пустой path, что позволяет задавать маршрут по умолчанию:

{
  path: '',
  action: () => 'Главная страница по умолчанию'
}

Такой маршрут срабатывает, когда URL не совпадает с другими маршрутами. Часто используется в комбинации с массивом маршрутов, где пустой путь располагается последним, обеспечивая fallback.

Wildcards и звездочки

Для обработки произвольных путей применяется символ *:

{
  path: '/files/*',
  action: ({ params }) => `Файл: ${params['*']}`
}

Здесь * захватывает все остатки пути после /files/ и передаёт их в объект params под ключом *. Например, URL /files/images/photo.jpg вернёт params['*'] = "images/photo.jpg".

  • Можно комбинировать динамические параметры и wildcard:
{
  path: '/blog/:year/:month/*',
  action: ({ params }) => `Блог за ${params.year}-${params.month}, путь: ${params['*']}`
}

Массив путей

Параметр path может быть массивом строк. Это позволяет одному маршруту обрабатывать несколько URL без дублирования кода:

{
  path: ['/about', '/info', '/details'],
  action: () => 'Информационная страница'
}

Universal Router будет сопоставлять любой из указанных путей с этим маршрутом. Такой подход полезен для поддержки устаревших или альтернативных URL.

Порядок маршрутов

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

const routes = [
  { path: '/user/:id', action: () => 'Пользователь' },
  { path: '/user', action: () => 'Список пользователей' },
  { path: '*', action: () => '404 Not Found' }
];

Краткое сравнение видов значений path

Вид path Особенности Пример
Строка точного соответствия Срабатывает только при полном совпадении URL /home
Динамический параметр Захватывает часть URL в params /user/:id
Параметр с regex Ограничение формата параметра /product/:id(\\d+)
Wildcard * Захватывает остаток пути /files/*
Массив путей Несколько URL на один маршрут ['/about','/info']
Пустой путь Маршрут по умолчанию ''

Особенности работы с query-параметрами

Важно понимать, что параметр path не учитывает query-параметры (?key=value). Они не влияют на совпадение пути. Query-параметры можно обрабатывать отдельно в action, используя context.query при интеграции с Universal Router:

{
  path: '/search',
  action: ({ query }) => `Поиск: ${query.q}`
}

Итоговые рекомендации по path

  • Всегда уточнять порядок маршрутов: от конкретного к общему.
  • Использовать динамические параметры для гибкой обработки URL.
  • Wildcard применять для catch-all маршрутов.
  • Regex-параметры помогают ограничивать допустимые значения.
  • Массив путей удобен для поддержки нескольких вариантов одного маршрута.

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

Оглавление