Параметры запроса

В библиотеке Universal Router параметры запроса (query parameters) не обрабатываются автоматически в виде отдельных объектов, как это делает, например, Express.js. Все параметры передаются через URL и могут быть извлечены вручную с помощью стандартных методов JavaScript.

Получение параметров запроса

URL может содержать строку запроса после знака ? в формате key=value. Для извлечения этих значений обычно используется объект URLSearchParams.

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/search',
    action: ({ query }) => {
      const searchParams = new URLSearchParams(query);
      const term = searchParams.get('term'); 
      const page = searchParams.get('page');
      return `Поиск по запросу: ${term}, страница: ${page}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/search', query: 'term=javascript&page=2' })
  .then(console.log);
// Выведет: Поиск по запросу: javascript, страница: 2

Ключевой момент: Universal Router передает всю строку после ? в свойство query, поэтому для работы с отдельными параметрами необходимо использовать URLSearchParams или аналогичные методы.

Динамические маршруты и параметры запроса

Маршруты с динамическими сегментами пути (например, /user/:id) могут сочетаться с параметрами запроса:

const routes = [
  {
    path: '/user/:id',
    action: ({ params, query }) => {
      const userId = params.id;
      const filter = new URLSearchParams(query).get('filter');
      return `Пользователь ${userId}, фильтр: ${filter}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/user/42', query: 'filter=active' })
  .then(console.log);
// Выведет: Пользователь 42, фильтр: active

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

Обработка нескольких параметров

Если URL содержит несколько одноимённых параметров, URLSearchParams позволяет работать с ними через методы getAll и entries.

const routes = [
  {
    path: '/products',
    action: ({ query }) => {
      const params = new URLSearchParams(query);
      const categories = params.getAll('category'); 
      return `Категории: ${categories.join(', ')}`;
    }
  }
];

router.resolve({ pathname: '/products', query: 'category=books&category=games' })
  .then(console.log);
// Выведет: Категории: books, games

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

Редиректы с сохранением параметров запроса

При реализации редиректов через Universal Router важно вручную передавать query-параметры, чтобы они не потерялись:

const routes = [
  {
    path: '/old-page',
    action: ({ query }) => {
      return { redirect: `/new-page?${query}` };
    }
  },
  {
    path: '/new-page',
    action: ({ query }) => `Новая страница, параметры: ${query}`
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/old-page', query: 'ref=123' })
  .then(console.log);
// Выведет объект редиректа: { redirect: '/new-page?ref=123' }

Важно: Universal Router не модифицирует строку запроса при редиректе. Все манипуляции с параметрами должны выполняться вручную.

Практические рекомендации

  1. Использовать URLSearchParams для извлечения отдельных параметров запроса.
  2. Разделять динамические сегменты и query-параметры, чтобы структура маршрутов оставалась чистой.
  3. Проверять наличие параметров перед использованием: params.id или searchParams.get('key') могут быть null.
  4. Поддерживать несколько значений одного параметра через getAll.
  5. Передавать query-параметры при редиректах для сохранения контекста запроса.

Пример полного использования

const routes = [
  {
    path: '/articles/:category',
    action: ({ params, query }) => {
      const category = params.category;
      const searchParams = new URLSearchParams(query);
      const page = searchParams.get('page') || '1';
      const tag = searchParams.getAll('tag');
      return `Категория: ${category}, страница: ${page}, теги: ${tag.join(', ')}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/articles/technology', query: 'page=2&tag=js&tag=web' })
  .then(console.log);
// Выведет: Категория: technology, страница: 2, теги: js, web

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

Оглавление