Преобразование параметров

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

Объявление параметров в маршруте

Параметры в маршрутах Universal Router обозначаются через двоеточие (:). Например:

const routes = [
  {
    path: '/users/:userId',
    action: ({ params }) => {
      console.log(params.userId);
    }
  }
];

Здесь userId автоматически становится свойством объекта params. Universal Router по умолчанию возвращает все параметры как строки.

Использование функции parse для преобразования

Для преобразования параметров в другой тип можно использовать встроенную поддержку функции parse. Она позволяет определить способ интерпретации значения параметра при разборе URL. Пример:

const routes = [
  {
    path: '/posts/:postId',
    parse: {
      postId: (value) => parseInt(value, 10)
    },
    action: ({ params }) => {
      console.log(typeof params.postId); // number
    }
  }
];

В этом примере postId преобразуется из строки в число. Такой подход особенно полезен для работы с идентификаторами, датами или логическими значениями.

Валидация параметров через match и parse

Помимо преобразования, Universal Router позволяет реализовать базовую проверку корректности параметров. Комбинация функции parse с проверкой внутри action обеспечивает надежную валидацию:

const routes = [
  {
    path: '/items/:itemId',
    parse: {
      itemId: (value) => {
        const id = parseInt(value, 10);
        if (isNaN(id) || id <= 0) {
          throw new Error('Invalid itemId');
        }
        return id;
      }
    },
    action: ({ params }) => {
      console.log(params.itemId);
    }
  }
];

Здесь некорректные значения itemId приводят к выбросу ошибки до выполнения основной логики маршрута.

Динамическое преобразование с использованием функций

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

const routes = [
  {
    path: '/events/:date',
    parse: {
      date: (value) => {
        const parsed = new Date(value);
        if (isNaN(parsed.getTime())) {
          throw new Error('Invalid date format');
        }
        return parsed;
      }
    },
    action: ({ params }) => {
      console.log(params.date instanceof Date); // true
    }
  }
];

Такой подход превращает параметр URL в полноценный объект JavaScript, готовый к дальнейшей обработке.

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

Для маршрутов с несколькими параметрами объект parse позволяет задать функции для каждого параметра одновременно:

const routes = [
  {
    path: '/products/:categoryId/:productId',
    parse: {
      categoryId: Number,
      productId: Number
    },
    action: ({ params }) => {
      console.log(params.categoryId, params.productId);
    }
  }
];

Это сокращает количество кода и делает маршруты более читаемыми.

Встроенные возможности toPath

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

import { compile } from 'path-to-regexp';

const path = compile('/users/:userId');
const url = path({ userId: 42 });
console.log(url); // '/users/42'

При необходимости можно заранее преобразовать данные перед вставкой в URL:

const url = path({ userId: String(42) });

Это обеспечивает согласованность типов между генерацией и разбором маршрутов.

Итоговые рекомендации по преобразованию параметров

  • Использовать объект parse для явного контроля типов параметров.
  • Применять функции проверки внутри parse для предотвращения некорректных значений.
  • Для сложных структур (даты, массивы) реализовать кастомные функции преобразования.
  • Поддерживать согласованность типов между parse и toPath, чтобы избежать ошибок при генерации URL.
  • Для числовых и логических значений применять встроенные конструкторы (Number, Boolean) или кастомные функции.

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

Оглавление