Наследование параметров

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

Параметры маршрута

Каждый маршрут в Navigo может содержать динамические параметры, обозначаемые двоеточием (:). Пример:

const router = new Navigo('/');

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

В данном примере :id — динамический сегмент, который будет передан в обработчик через объект params.

Передача параметров между маршрутами

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

Пример структуры с наследованием:

router.on({
  '/user/:userId': {
    '/posts': (params) => {
      console.log(params.userId); // Параметр родителя доступен
    },
    '/settings': (params) => {
      console.log(params.userId); // Параметр родителя также доступен
    }
  }
});

Здесь параметр userId автоматически доступен в дочерних маршрутах /posts и /settings, что упрощает доступ к контексту родительского маршрута.

Плоская и вложенная маршрутизация

Плоская структура

В плоской структуре маршруты задаются отдельно:

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

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

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

Вложенная структура

Использование вложенной структуры позволяет централизованно управлять параметрами родителя:

router.on({
  '/user/:userId': {
    '/posts': showPosts,
    '/settings': showSettings
  }
});

В этом случае params.userId доступен во всех дочерних маршрутах, а маршруты определяются более компактно и наглядно.

Динамическое наследование параметров

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

router.navigate('/user/42/posts');

В обработчике /user/:userId/posts объект params будет содержать:

{ userId: '42' }

Если затем выполнить навигацию к дочернему маршруту /settings, параметр userId сохраняется автоматически, даже если он явно не указан:

router.navigate('/user/42/settings');

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

  1. Параметры родителя доступны только в пределах вложенной структуры. Если дочерний маршрут задан вне контекста родителя, параметр не будет наследован.
  2. Переопределение параметров: дочерний маршрут может определить свой параметр с тем же именем, что приведет к перекрытию родительского значения.
  3. Фильтрация параметров: Navigo не выполняет автоматическую проверку типов. Все параметры передаются как строки, и при необходимости нужно выполнять явное преобразование.

Применение наследования параметров

  • Управление состоянием пользователя: хранение userId на уровне родительского маршрута позволяет не передавать его вручную в каждый дочерний компонент.
  • Фильтрация контента: дочерние маршруты могут использовать параметры родителя для динамического запроса данных.
  • Сложные SPA: упрощает организацию маршрутов с множеством уровней вложенности и общей логикой обработки.

Практический пример с несколькими уровнями

router.on({
  '/shop/:shopId': {
    '/categories/:categoryId': {
      '/products/:productId': (params) => {
        console.log(params.shopId);     // наследуется от родителя
        console.log(params.categoryId); // наследуется от промежуточного родителя
        console.log(params.productId);  // локальный параметр маршрута
      }
    }
  }
});

В этой схеме Navigo автоматически передает все параметры каждого уровня родительских маршрутов в обработчик конечного маршрута. Это обеспечивает глубокое наследование параметров и упрощает доступ к контексту любого уровня вложенности.

Вывод

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

Оглавление