Структура объекта маршрута

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

Основные свойства маршрута

  1. path Строка, определяющая шаблон URL. Может содержать параметры, указанные через двоеточие :param, и поддерживает регулярные выражения. Примеры:

    { path: '/users/:id' }
{ path: '/files/:fileName(.*)' }

    Параметры, указанные в пути, автоматически доступны в объекте context.params.

  2. action Функция, вызываемая при совпадении маршрута. Принимает один аргумент — context — объект с информацией о маршруте:

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

    Возвращаемое значение функции может быть любым: строкой, объектом, промисом. Если action возвращает промис, Universal Router автоматически обрабатывает асинхронные операции.

  3. children Массив вложенных маршрутов, позволяющий создавать иерархическую структуру URL. Если родительский маршрут совпадает, поиск продолжается в массиве children. Пример:

    {
  path: '/dashboard',
  action: () => 'Dashboard',
  children: [
    { path: '/settings', action: () => 'Settings' },
    { path: '/profile', action: () => 'Profile' }
  ]
}

    Вложенные маршруты наследуют контекст родителя, включая параметры и состояние.

Дополнительные свойства

  1. name Уникальное имя маршрута, полезное для ссылок или генерации URL:

    { path: '/login', name: 'login', action: () => 'Login Page' }

    Позволяет ссылаться на маршрут независимо от текущего пути:

    router.resolve({ name: 'login' });

  2. redirect Строка или функция, указывающая адрес для перенаправления. Может быть статической или динамической:

    { path: '/', redirect: '/home' }
{ path: '/old', redirect: (context) => `/new?from=${context.path}` }

  3. parent Используется редко, но позволяет явно указать родительский маршрут. Обычно управление иерархией осуществляется через children.

  4. caseSensitive Булево значение, определяющее чувствительность маршрута к регистру символов. По умолчанию false.

  5. resolveRoute Функция, позволяющая полностью переопределить логику сопоставления маршрута. Принимает объект маршрута и контекст. Используется для сложных случаев, когда стандартные методы не подходят.

Параметры маршрута

  • Позиционные параметры: задаются через двоеточие :param.
  • Опциональные параметры: добавляются через ?, например /posts/:id?.
  • Повторяющиеся параметры: можно указать с помощью * или + в регулярном выражении, например /tags/:tag+.

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

{ path: '/posts/:id?', action: ctx => ctx.params.id || 'All Posts' }
{ path: '/files/:path(.*)', action: ctx => ctx.params.path }

Параметры автоматически попадают в context.params, что упрощает работу с динамическими маршрутами.

Асинхронная обработка

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

{
  path: '/users/:id',
  action: async (context) => {
    const user = await fetchUser(context.params.id);
    return user;
  }
}

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

Вложенные маршруты и наследование контекста

Вложенные маршруты получают:

  • Параметры родителя через context.params.
  • Результат родительского action доступен, если использовать цепочку промисов.
  • Возможность переопределить любое свойство родителя, включая action и path.

Пример:

{
  path: '/dashboard',
  action: () => 'Dashboard',
  children: [
    {
      path: '/stats',
      action: (ctx) => `Stats in ${ctx.params.section || 'main'}`
    }
  ]
}

В этом примере дочерний маршрут /dashboard/stats может использовать параметры и состояние родителя.

Объединение маршрутов через массив

Universal Router позволяет создавать массив объектов маршрутов, формируя единый роутер:

const routes = [
  { path: '/', action: () => 'Home' },
  { path: '/about', action: () => 'About' },
  {
    path: '/users',
    children: [
      { path: '/:id', action: ctx => `User ${ctx.params.id}` }
    ]
  }
];

const router = new UniversalRouter(routes);

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

Ключевые моменты

  • path — основной идентификатор маршрута, поддерживает параметры и регулярные выражения.
  • action — функция обработки, может быть синхронной или асинхронной.
  • children — вложенные маршруты, наследуют контекст родителя.
  • params автоматически создаются из динамических сегментов URL.
  • redirect и name позволяют управлять навигацией и ссылками без привязки к URL.
  • Асинхронные action и вложенные маршруты обеспечивают гибкую загрузку данных и компонентов.

Структура объекта маршрута в Universal Router — это комбинация гибкости и простоты, позволяющая строить как простые, так и сложные маршрутизации с минимальными усилиями.

Оглавление