Wildcard-маршруты

В Navigo wildcard-маршруты позволяют обрабатывать динамические сегменты URL, которые могут изменяться в зависимости от запроса. Они особенно полезны для реализации универсальных обработчиков, где часть пути неизвестна заранее, например, /user/123 или /product/electronics/laptop.

Основной синтаксис

Wildcard обозначается символом * и может быть использован в любом месте пути. Примеры:

const router = new Navigo('/');

router.on('/posts/*', (params) => {
  console.log('Доступ к посту с динамическим идентификатором:', params);
});

В этом случае любой путь, начинающийся с /posts/, будет соответствовать маршруту. Сегмент после /posts/ автоматически попадает в объект params как *.

Пример работы:

/posts/1 → params['*'] === '1'
/posts/2023/03 → params['*'] === '2023/03'

Wildcard захватывает все последующие сегменты пути, включая слеши.

Использование нескольких wildcard

В Navigo можно использовать более одного wildcard в пути. Каждый wildcard получает свой индекс в объекте params в порядке их появления.

router.on('/category/*/item/*', (params) => {
  console.log('Категория:', params['*0']);
  console.log('Товар:', params['*1']);
});

Пример обработки:

URL /category/electronics/item/laptop → params['*0'] === 'electronics' → params['*1'] === 'laptop'

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

Wildcard и обычные параметры

Navigo позволяет комбинировать wildcard с именованными параметрами. Именованные параметры определяются через двоеточие :, что позволяет получить более структурированные данные из URL.

router.on('/blog/:year/:month/*', (params) => {
  console.log('Год:', params.year);
  console.log('Месяц:', params.month);
  console.log('Остальная часть URL:', params['*']);
});

Пример для URL /blog/2023/03/intro-to-navigo:

params.year === '2023'
params.month === '03'
params['*'] === 'intro-to-navigo'

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

Wildcard в качестве fallback

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

router.notFound((query) => {
  console.log('Страница не найдена:', query);
});

В случае использования wildcard для глобального маршрута:

router.on('*', () => {
  console.log('Любой путь, не совпавший с другими маршрутами');
});

Wildcard в этом контексте гарантирует, что любой неописанный маршрут будет обработан.

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

Порядок маршрутов имеет значение – маршруты с wildcard должны идти после более конкретных маршрутов, иначе конкретные маршруты могут быть перекрыты.
Wildcard захватывает всё до конца пути – он не ограничен одним сегментом, поэтому используется для длинных динамических URL.
Совместимость с History API – wildcard корректно работает как с hash-, так и с history-режимом Navigo.
Необходимо избегать пересечения именованных параметров и wildcard с одинаковыми сегментами, чтобы избежать неожиданных результатов в params.

Практические примеры

Блог с динамическими категориями:

router.on('/blog/*', (params) => {
  const path = params['*'].split('/');
  const category = path[0];
  const post = path[1] || null;

  console.log('Категория:', category);
  console.log('Пост:', post);
});

/blog/javascript/intro → category: javascript, post: intro
/blog/design → category: design, post: null

Маршрут для страниц профиля пользователей:

router.on('/user/*/settings', (params) => {
  console.log('Настройки пользователя:', params['*']);
});

/user/john/settings → params['*'] === 'john'
/user/42/settings → params['*'] === '42'

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