Интерфейс Route

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

Структура объекта Route

Объект Route имеет несколько ключевых свойств, которые позволяют гибко управлять маршрутизацией:

  • path — строка или массив строк, задающий шаблон URL, по которому будет происходить совпадение. Поддерживаются параметры и регулярные выражения.

    {
  path: '/users/:id',
  action: ({ params }) => `Пользователь с ID ${params.id}`
}

  • action — функция, которая выполняется при совпадении маршрута. Получает объект с контекстом и параметрами.

  • children — массив вложенных маршрутов, используемых для создания иерархической структуры маршрутизации. Позволяет строить вложенные интерфейсы и поддерживать вложенные URL.

  • name — строка, уникальное имя маршрута. Используется для генерации URL и упрощённой навигации через ссылки на маршрут по имени.

  • redirect — строка или функция, определяющая, куда перенаправить пользователя при совпадении маршрута.

  • exact — булевый флаг, который указывает, должно ли совпадение быть полным (true) или частичным (false).

  • match — функция, которая позволяет вручную определять логику сопоставления URL с маршрутом. Используется для более сложных случаев, когда стандартного шаблона недостаточно.

Шаблоны маршрутов

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

  • Параметры URL: сегменты вида :param автоматически извлекаются и передаются в объект params.

    {
  path: '/posts/:postId/comments/:commentId',
  action: ({ params }) => `Комментарий ${params.commentId} к посту ${params.postId}`
}

  • Регулярные выражения: можно ограничить значения параметров, используя синтаксис :param(\\d+) для числовых значений.

    {
  path: '/products/:id(\\d+)',
  action: ({ params }) => `Продукт ${params.id}`
}

  • Необязательные сегменты: добавляются с помощью символа ?.

    {
  path: '/archive/:year/:month?',
  action: ({ params }) => `Архив за ${params.year} ${params.month || ''}`
}

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

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

{
  path: '/dashboard',
  action: () => 'Главная панель',
  children: [
    {
      path: 'settings',
      action: () => 'Настройки пользователя'
    },
    {
      path: 'profile',
      action: () => 'Профиль пользователя'
    }
  ]
}

В данном примере /dashboard/settings и /dashboard/profile наследуют контекст родительского маршрута и выполняют свои действия.

Контекст и параметры

Функция action получает объект контекста, который содержит:

  • params — объект с параметрами маршрута.
  • pathname — текущий URL.
  • query — объект с GET-параметрами (если используется парсер query).
  • route — сам маршрут, который сработал.
  • router — экземпляр Universal Router для программного управления навигацией.

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

{
  path: '/users/:id',
  action: ({ params, router }) => {
    if (params.id === 'admin') {
      return router.resolve('/admin');
    }
    return `Пользователь: ${params.id}`;
  }
}

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

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

{
  path: '/old-path',
  redirect: '/new-path'
}

{
  path: '/profile',
  redirect: ({ params }) => (params.id === 'guest' ? '/login' : '/dashboard')
}

Функция match позволяет создавать условные маршруты на уровне сопоставления, возвращая false, если маршрут не должен сработать:

{
  path: '/secret',
  match: ({ isAuthenticated }) => isAuthenticated,
  action: () => 'Секретная страница'
}

Оптимизация маршрутов

  • Распределение маршрутов по вложенности снижает дублирование кода и позволяет использовать общие шаблоны.
  • Применение exact: true предотвращает случайные частичные совпадения.
  • Уникальные name упрощают генерацию ссылок и навигацию.

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

const routes = [
  {
    path: '/',
    name: 'home',
    action: () => 'Главная страница'
  },
  {
    path: '/users',
    children: [
      {
        path: ':id(\\d+)',
        name: 'user',
        action: ({ params }) => `Пользователь ${params.id}`
      },
      {
        path: 'new',
        action: () => 'Создание пользователя'
      }
    ]
  },
  {
    path: '/login',
    action: () => 'Форма входа'
  },
  {
    path: '/old-dashboard',
    redirect: '/dashboard'
  }
];

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

Оглавление