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

Динамические сегменты в Universal Router позволяют создавать маршруты, параметры которых определяются во время навигации. Это ключевой инструмент для построения маршрутизации с переменными частями URL, например, /users/:id или /posts/:category/:postId.

Определение динамических сегментов

Динамический сегмент обозначается двоеточием : перед именем параметра:

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/users/:id',
    action: ({ params }) => {
      return `User ID: ${params.id}`;
    }
  }
];

const router = new UniversalRouter(routes);

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

Здесь :id — динамический сегмент. При переходе на /users/42 объект params автоматически получает { id: '42' }.

Ключевой момент: имя сегмента после : используется как ключ в объекте params.

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

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

{
  path: '/posts/:category/:postId',
  action: ({ params }) => {
    return `Category: ${params.category}, Post: ${params.postId}`;
  }
}

При обращении к /posts/javascript/101 объект params будет таким:

{
  category: 'javascript',
  postId: '101'
}

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

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

Необязательные сегменты обозначаются с помощью знака ?:

{
  path: '/archive/:year/:month?',
  action: ({ params }) => {
    return params.month
      ? `Archive for ${params.year}/${params.month}`
      : `Archive for ${params.year}`;
  }
}

URL /archive/2026 вернёт { year: '2026', month: undefined }, а /archive/2026/03 вернёт { year: '2026', month: '03' }.

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

Ограничения динамических сегментов

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

{
  path: '/products/:id(\\d+)',
  action: ({ params }) => {
    return `Product ID: ${params.id}`;
  }
}

В этом примере :id примет только числовые значения. URL /products/abc не будет соответствовать маршруту, а /products/123 успешно разрешится.

Поддержка вложенных маршрутов

Динамические сегменты прекрасно работают с вложенными маршрутами:

const routes = [
  {
    path: '/users/:userId',
    children: [
      {
        path: 'settings',
        action: ({ params }) => `Settings for user ${params.userId}`
      },
      {
        path: 'profile',
        action: ({ params }) => `Profile of user ${params.userId}`
      }
    ]
  }
];

Переход на /users/5/settings вернёт Settings for user 5. Объект params передаётся во все дочерние маршруты.

Важно: дочерние маршруты наследуют параметры родительского маршрута.

Динамические сегменты и query-параметры

Universal Router не обрабатывает query-параметры напрямую. Их можно получить через объект location.search при интеграции с window.location или сторонними библиотеками парсинга URL:

const url = '/users/42?active=true';
const queryParams = new URLSearchParams(url.split('?')[1]);
console.log(queryParams.get('active')); // true

Динамические сегменты работают только с частью пути до ?, query-параметры обрабатываются отдельно.

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

  • Профили пользователей: /users/:id для отображения профиля конкретного пользователя.
  • Блоги и статьи: /blog/:year/:month/:slug для отображения статьи по дате и уникальному идентификатору.
  • Категории и фильтры: /products/:category/:subcategory? для динамических каталогов.

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

Советы по проектированию

  1. Имена сегментов должны быть понятными и уникальными внутри одного маршрута.
  2. Использовать регулярные выражения для контроля формата данных (например, чисел, дат).
  3. Дочерние маршруты наследуют параметры, что упрощает организацию сложных интерфейсов.
  4. Не смешивать необязательные сегменты с обязательными без необходимости, чтобы избежать конфликтов и непредсказуемого поведения.

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

Оглавление