Извлечение параметров из URL

Universal Router предоставляет мощный и гибкий механизм маршрутизации для JavaScript-приложений. Одной из ключевых возможностей является извлечение параметров из URL и их последующая обработка в обработчиках маршрутов.

Маршруты в Universal Router определяются как объекты с обязательным свойством path и функцией action. Параметры указываются с использованием двоеточия (:) перед именем переменной.

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/users/:userId',
    action: ({ params }) => {
      return `Пользователь: ${params.userId}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve('/users/42').then(console.log); // Выведет "Пользователь: 42"

В этом примере :userId — это именованный параметр. Universal Router автоматически извлекает его из URL и передает в объект params в метод action.

Декларация нескольких параметров

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

{
  path: '/users/:userId/orders/:orderId',
  action: ({ params }) => {
    return `Пользователь ${params.userId}, заказ ${params.orderId}`;
  }
}

При разрешении маршрута /users/42/orders/1001 объект params будет содержать:

{
  userId: '42',
  orderId: '1001'
}

Universal Router поддерживает динамические параметры в любом месте пути, включая начало, середину и конец URL.

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

Для маршрутов с необязательными параметрами используется синтаксис (…). Параметр будет присутствовать в params, если он указан в URL, иначе его значение будет undefined.

{
  path: '/products/:category/:id?',
  action: ({ params }) => {
    return params.id
      ? `Категория: ${params.category}, Товар: ${params.id}`
      : `Категория: ${params.category}, Товар не указан`;
  }
}

Разрешение маршрута /products/electronics даст params.id = undefined, а /products/electronics/123 — params.id = '123'.

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

Universal Router позволяет задавать регулярные выражения для проверки параметров:

{
  path: '/posts/:postId(\\d+)',
  action: ({ params }) => {
    return `Пост №${params.postId}`;
  }
}

В этом случае URL /posts/42 будет разрешен, а /posts/abc — нет, так как параметр postId должен содержать только цифры.

Доступ к query-параметрам

Universal Router не разбирает query-параметры по умолчанию, но их легко получить через стандартный объект URLSearchParams:

{
  path: '/search',
  action: ({ query }) => {
    const params = new URLSearchParams(query);
    return `Поиск: ${params.get('q')}`;
  }
}

При URL /search?q=universal+router можно получить значение q через params.get('q').

Вложенные маршруты и параметры

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

const routes = [
  {
    path: '/users/:userId',
    children: [
      {
        path: 'orders/:orderId',
        action: ({ params }) => {
          return `Пользователь ${params.userId}, заказ ${params.orderId}`;
        }
      }
    ]
  }
];

При разрешении /users/42/orders/1001 объект params содержит и userId, и orderId. Вложенные маршруты позволяют не повторять общие сегменты URL и сохраняют контекст параметров.

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

Объект params всегда доступен в action и может использоваться для любых вычислений или условной логики:

{
  path: '/files/:fileId',
  action: ({ params }) => {
    const fileId = parseInt(params.fileId, 10);
    if (isNaN(fileId)) {
      return 'Некорректный идентификатор файла';
    }
    return `Файл с ID ${fileId} найден`;
  }
}

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

Советы по использованию параметров

  • Для обязательных параметров используйте синтаксис :param.
  • Для необязательных — :param? или (…).
  • Для валидации формата — регулярные выражения.
  • Для query-параметров — объект URLSearchParams.
  • Для вложенных маршрутов — наследование параметров через children.

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

Оглавление