Необязательные параметры

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

Синтаксис необязательных параметров

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

const router = new Navigo('/', { hash: true });

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

В данном примере параметр id может присутствовать в URL, а может отсутствовать.

  • Если пользователь переходит по /user/42, то params.id будет равно "42".
  • Если пользователь переходит просто по /user/, то params.id будет undefined.

Комбинация обязательных и необязательных параметров

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

router.on('/product/:category/:id?', (params) => {
    console.log(params.category, params.id);
});
  • /product/electronics/123 → params.category = "electronics", params.id = "123"
  • /product/electronics/ → params.category = "electronics", params.id = undefined

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

Необязательные параметры с несколькими сегментами

Для более сложных случаев можно использовать необязательные группы с круглыми скобками ():

router.on('/archive(/:year)(/:month)', (params) => {
    console.log(params.year, params.month);
});
  • /archive/2026/03 → params.year = "2026", params.month = "03"
  • /archive/2026 → params.year = "2026", params.month = undefined
  • /archive/ → params.year = undefined, params.month = undefined

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

Значения по умолчанию для необязательных параметров

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

router.on('/search/:query?', (params) => {
    const query = params.query || 'all';
    console.log(query);
});
  • /search/javascript → "javascript"
  • /search/ → "all"

Таким образом, можно обеспечить предсказуемое поведение приложения даже при отсутствии параметра в URL.

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

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

router.on('/order/:id(\\d+)?', (params) => {
    console.log(params.id);
});
  • /order/123 → params.id = "123"
  • /order/abc → не совпадает с маршрутом
  • /order/ → params.id = undefined

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

Практические сценарии использования

  1. Страницы профиля: /user/:id? позволяет использовать один маршрут как для списка пользователей (/user), так и для конкретного пользователя (/user/42).
  2. Архивы и фильтры: /archive(/:year)(/:month) удобно использовать для динамических архивов или календарных фильтров.
  3. Поиск и фильтрация: /search/:query? позволяет использовать один роут для страницы поиска с и без заданного запроса.

Эти подходы сокращают количество маршрутов и делают код более чистым и поддерживаемым.

Важные нюансы

  • Необязательные параметры всегда должны идти в конце маршрута или внутри скобок.
  • Если маршрут содержит несколько необязательных параметров, использование скобок позволяет избежать конфликтов и неопределённого поведения.
  • Проверка наличия параметра через undefined помогает корректно подставлять значения по умолчанию.

Вывод

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

Оглавление