Символы подстановки

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

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

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

const routes = [
  { path: '/users/:id', action: ({ params }) => `User ID: ${params.id}` }
];
  • :id — это символ подстановки, который принимает любое значение на позиции сегмента пути.
  • Значение сегмента автоматически передаётся в объект params, доступный в функции action.

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

const router = new UniversalRouter(routes);

router.resolve('/users/42').then(console.log); // User ID: 42

Несколько динамических сегментов

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

const routes = [
  { path: '/posts/:postId/comments/:commentId', action: ({ params }) => params }
];

При переходе на /posts/10/comments/5 объект params будет:

{
  "postId": "10",
  "commentId": "5"
}

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

Необязательные сегменты

Символ подстановки может быть необязательным, если использовать синтаксис :param?:

const routes = [
  { path: '/users/:id?', action: ({ params }) => params.id || 'No ID provided' }
];
  • /users/123 → { id: '123' }
  • /users/ → {} и вывод: No ID provided

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

Повторяющиеся сегменты

Использование звёздочки * позволяет захватывать несколько сегментов в один параметр:

const routes = [
  { path: '/files/*path', action: ({ params }) => params.path }
];
  • /files/images/logo.png → { path: 'images/logo.png' }
  • /files/docs/report.pdf → { path: 'docs/report.pdf' }

Такой подход применяется для маршрутов с вложенными папками или динамическими ресурсами.

Регулярные выражения для параметров

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

const routes = [
  { path: '/product/:id(\\d+)', action: ({ params }) => params.id }
];
  • Только числовые значения будут соответствовать маршруту (/product/123 → 123).
  • /product/abc не совпадёт.

Регулярные выражения повышают точность сопоставления маршрутов и предотвращают нежелательные совпадения.

Значения по умолчанию и обработка ошибок

Символы подстановки можно сочетать с логикой по умолчанию или обработкой отсутствующих параметров:

const routes = [
  { 
    path: '/search/:query?', 
    action: ({ params }) => params.query || 'default search' 
  }
];
  • /search/javascript → javascript
  • /search/ → default search

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

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

  • Имена символов подстановки должны быть уникальными в пределах маршрута, чтобы избежать конфликтов.
  • Рекомендуется использовать чёткие и читаемые имена, отражающие смысл сегмента (:userId, :postSlug, :categoryName).

Комбинирование символов подстановки

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

const routes = [
  { path: '/:lang?/docs/*docPath', action: ({ params }) => params }
];
  • /en/docs/guide/setup → { lang: 'en', docPath: 'guide/setup' }
  • /docs/tutorial → { lang: undefined, docPath: 'tutorial' }

Это создаёт мощный инструмент для реализации локализованных маршрутов или маршрутов с глубокой структурой вложенности.

Резюме особенностей символов подстановки

  1. :param — динамический сегмент, обязательный.
  2. :param? — динамический сегмент, необязательный.
  3. *param — захват нескольких сегментов в один параметр.
  4. :param(regex) — сегмент с ограничением по регулярному выражению.
  5. Комбинирование разных символов позволяет строить сложные маршруты без дублирования.

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

Оглавление