Работа с массивами параметров

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

Определение маршрута с массивом параметров

Для того чтобы маршрут распознавал несколько значений, в шаблоне пути используется двойная двоеточие или символы расширенного синтаксиса. На практике чаще применяют формат param+, который обозначает массив:

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/tags/:tags+',
    action: ({ params }) => {
      return params.tags; // массив тегов
    }
  }
];

const router = new UniversalRouter(routes);

(async () => {
  const result = await router.resolve('/tags/javascript/nodejs/vue');
  console.log(result); // ['javascript', 'nodejs', 'vue']
})();

Разбор примера:

  • :tags+ — ключевой момент: знак + указывает на множественные сегменты.
  • В params.tags Universal Router автоматически собирает все сегменты пути в массив.

Альтернативный способ: регулярные выражения

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

const routes = [
  {
    path: '/items/:ids(\\d+(?:,\\d+)*)',
    action: ({ params }) => {
      return params.ids.split(',').map(Number); // массив чисел
    }
  }
];

const router = new UniversalRouter(routes);

(async () => {
  const result = await router.resolve('/items/12,45,78');
  console.log(result); // [12, 45, 78]
})();

Особенности подхода:

  • Регулярное выражение \\d+(?:,\\d+)* позволяет принимать строку чисел, разделённых запятыми.
  • В action требуется дополнительная обработка (split и map), чтобы получить массив.
  • Такой метод более гибкий для нестандартных форматов, но сложнее в поддержке.

Параметры query как массив

Помимо сегментов пути, Universal Router поддерживает параметры query, которые могут быть массивами:

const routes = [
  {
    path: '/search',
    action: ({ query }) => {
      return query.tags; // массив ['js', 'vue', 'react']
    }
  }
];

const router = new UniversalRouter(routes);

(async () => {
  const result = await router.resolve({ pathname: '/search', query: { tags: ['js', 'vue', 'react'] } });
  console.log(result); // ['js', 'vue', 'react']
})();
  • Здесь query.tags уже представляет собой массив без дополнительных преобразований.
  • Использование query удобно для фильтров, где порядок элементов может быть произвольным.

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

Иногда требуется сделать массив параметров необязательным. В Universal Router это реализуется через *:

const routes = [
  {
    path: '/categories/:categories*',
    action: ({ params }) => {
      return params.categories || []; // если параметр отсутствует, вернется пустой массив
    }
  }
];

const router = new UniversalRouter(routes);

(async () => {
  console.log(await router.resolve('/categories')); // []
  console.log(await router.resolve('/categories/tech/science')); // ['tech', 'science']
})();
  • :categories* — символ * означает 0 или более сегментов.
  • Это позволяет безопасно обрабатывать ситуации, когда массив может быть пустым.

Комбинирование массивов и одиночных параметров

Universal Router позволяет смешивать массивы и одиночные параметры в одном маршруте:

const routes = [
  {
    path: '/user/:id/photos/:photoIds+',
    action: ({ params }) => {
      return {
        userId: params.id,
        photos: params.photoIds
      };
    }
  }
];

const router = new UniversalRouter(routes);

(async () => {
  const result = await router.resolve('/user/42/photos/1/2/3');
  console.log(result); // { userId: '42', photos: ['1','2','3'] }
})();
  • В одном маршруте :id остаётся одиночным параметром, а :photoIds+ собирает все последующие сегменты в массив.
  • Это удобно для маршрутов с ресурсами, где один объект связан с несколькими под-ресурсами.

Практические советы

  1. Использовать + для обязательных массивов, * для необязательных.
  2. Всегда проверять тип данных в action, так как путь может быть пустым или некорректным.
  3. Query-параметры массивов чаще подходят для фильтров и поиска, path-параметры — для идентификаторов и иерархических структур.
  4. Комбинировать регулярные выражения и массивы только при сложных форматах, иначе проще использовать +/*.

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

Оглавление