Параметр action и его назначение

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

Основное назначение action

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

  • Строку или текстовое содержимое
  • Объект с данными для рендеринга
  • Промис, который асинхронно загружает компонент или данные
const routes = [
  {
    path: '/home',
    action: () => 'Главная страница'
  },
  {
    path: '/about',
    action: () => ({ title: 'О нас', content: 'Информация о компании' })
  }
];

В примере выше для пути /home возвращается простая строка, а для /about — объект с данными. Universal Router автоматически обрабатывает результат action и передаёт его вызывающему коду.

Контекст action

Функция action принимает один аргумент — context, который содержит:

  • pathname — текущий URL, с которым произошло совпадение
  • params — объект параметров маршрута, извлечённых из динамических сегментов URL
  • query — объект параметров запроса (если используется дополнительный парсер)
  • route — объект текущего маршрута
  • router — ссылка на сам экземпляр Universal Router, что позволяет выполнять вложенные переходы
const routes = [
  {
    path: '/user/:id',
    action: ({ params }) => `Пользователь с ID: ${params.id}`
  }
];

При переходе на /user/42 функция action вернёт строку Пользователь с ID: 42. Использование params позволяет динамически строить контент в зависимости от URL.

Асинхронные действия

action может быть асинхронной функцией. Это особенно важно для загрузки данных с сервера или динамического импорта модулей. Universal Router корректно обрабатывает промисы, что позволяет строить SPA с ленивой загрузкой компонентов.

const routes = [
  {
    path: '/posts/:id',
    action: async ({ params }) => {
      const response = await fetch(`/api/posts/${params.id}`);
      const post = await response.json();
      return post;
    }
  }
];

В этом примере при переходе на /posts/10 произойдёт асинхронная загрузка данных о посте с ID 10. Результат запроса автоматически возвращается вызывающему коду.

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

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

const routes = [
  {
    path: '/dashboard',
    action: () => 'Главная панель',
    children: [
      {
        path: '/stats',
        action: () => 'Статистика панели'
      }
    ]
  }
];

Переход на /dashboard/stats сначала вызовет action родительского маршрута (Главная панель), а затем дочернего (Статистика панели). Это позволяет строить иерархические интерфейсы с общими обертками и частями страниц.

Обработка ошибок и отсутствие маршрута

Если ни один маршрут не совпадает, Universal Router предоставляет возможность задать action по умолчанию через глобальный маршрут '*' или обработать ошибку внутри action. Это делает обработку 404 и других ошибок гибкой.

const routes = [
  {
    path: '*',
    action: () => 'Страница не найдена'
  }
];

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

  • Возвращайте данные, а не напрямую DOM: Universal Router не привязан к конкретной библиотеке UI, поэтому action лучше использовать для подготовки данных, а рендеринг выполнять отдельно.
  • Используйте асинхронные функции для загрузки данных: Это позволяет поддерживать динамические и большие приложения с ленивой загрузкой.
  • Комбинируйте с параметрами маршрута: Динамические сегменты URL дают гибкость для генерации уникального контента.
  • Поддержка вложенных маршрутов: Каждый уровень может иметь своё action, что упрощает построение сложных интерфейсов.

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

Оглавление