Токены в маршрутизации

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

router.on('/user/:id', (params) => {
    console.log(params.id);
});

В этом примере :id — токен, который соответствует любой части URL, следующей за /user/. Если посетитель перейдёт по адресу /user/42, объект params будет содержать { id: "42" }.

Именование токенов

Имена токенов должны быть уникальными для конкретного маршрута. Они могут содержать латинские буквы, цифры и символ подчеркивания. Например:

router.on('/post/:postId/comment/:commentId', (params) => {
    console.log(params.postId, params.commentId);
});

Здесь два токена: :postId и :commentId, что позволяет маршруту извлекать значения одновременно из нескольких сегментов URL.

Необязательные токены

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

router.on('/page/:pageId(/:section)', (params) => {
    console.log(params.pageId, params.section);
});

Если URL /page/5 — params.section будет undefined. Если URL /page/5/introduction — params.section примет значение "introduction".

Токены с регулярными выражениями

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

router.on('/order/:orderId(\\d+)', (params) => {
    console.log(params.orderId);
});

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

Группировка и вложенные токены

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

router.on('/shop/:category/:itemId', (params) => {
    console.log(params.category, params.itemId);
});

Такой подход делает маршрутизацию более структурированной и легко масштабируемой.

Токены и ссылки с query-параметрами

Navigo токены работают с сегментами пути, а query-параметры (?key=value) извлекаются отдельно. Для работы с query-параметрами необходимо использовать объект URLSearchParams:

router.on('/search/:query', (params, query) => {
    const searchParams = new URLSearchParams(query);
    console.log(params.query, searchParams.get('page'));
});

Токен :query захватывает часть пути, а URLSearchParams позволяет работать с параметрами запроса.

Дефолтные значения токенов

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

router.on('/profile/:tab?', (params) => {
    const activeTab = params.tab || 'overview';
    console.log(activeTab);
});

Здесь ? делает токен необязательным, а оператор || задаёт значение по умолчанию.

Ограничения и нюансы использования токенов

  1. Только один уровень сегмента: токен захватывает только один сегмент пути между слэшами.
  2. Не учитывают слэши внутри значения: /user/:id не сможет корректно захватить 123/extra.
  3. Чувствительность к регистру: токены различают строчные и прописные буквы в URL, если не включён флаг caseSensitive.
  4. Конфликты маршрутов: маршруты с одинаковым количеством сегментов и токенами могут пересекаться. Важно правильно расставлять приоритеты вызова маршрутов.

Практическая структура с токенами

Использование токенов позволяет строить чёткую иерархию маршрутов:

router
  .on('/blog', () => { console.log('Список постов'); })
  .on('/blog/:id', (params) => { console.log('Пост', params.id); })
  .on('/blog/:id/edit', (params) => { console.log('Редактирование поста', params.id); });

Каждый маршрут использует токены для динамического доступа к ресурсам, а структура URL остаётся логически понятной.

Резюме по токенам

  • Токены начинаются с : и соответствуют динамическим сегментам URL.
  • Можно использовать несколько токенов на одном маршруте для извлечения нескольких значений.
  • Поддерживаются необязательные токены и токены с регулярными выражениями.
  • Для query-параметров и дефолтных значений требуется дополнительная обработка.
  • Грамотное использование токенов повышает гибкость маршрутизации и упрощает структуру приложений.

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

Оглавление