Возврат значений из action

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

const routes = [
  {
    path: '/home',
    action: () => {
      return 'Главная страница';
    }
  }
];

В этом примере при вызове маршрута /home возвращается простая строка. Этот возврат может быть как синхронным, так и асинхронным.

Синхронный и асинхронный возврат

action может возвращать:

  1. Простые значения (строки, числа, объекты)
  2. Promise для асинхронных операций

Пример синхронного возврата:

{
  path: '/profile',
  action: () => {
    return { user: 'Alice', role: 'admin' };
  }
}

Пример асинхронного возврата:

{
  path: '/data',
  action: async () => {
    const response = await fetch('/api/data');
    return response.json();
  }
}

Асинхронный возврат особенно важен при работе с API или динамическими данными. Universal Router автоматически разрешает Promise и передаёт результат вызывающему коду.

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

Функция action получает два аргумента:

  1. context — объект с информацией о маршруте и окружении
  2. params — объект с параметрами маршрута
{
  path: '/user/:id',
  action: ({ params }) => {
    return `Пользователь с ID: ${params.id}`;
  }
}

Здесь значение параметра id автоматически извлекается из URL и становится доступным внутри action. Возврат значения может быть объектом с данными или готовой разметкой.

Возврат объектов с дополнительной информацией

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

{
  path: '/article/:slug',
  action: ({ params }) => {
    return {
      content: `Статья: ${params.slug}`,
      title: `Заголовок статьи ${params.slug}`,
      requiresAuth: true
    };
  }
}

Universal Router не накладывает ограничений на тип возвращаемого объекта, что позволяет строить гибкую архитектуру: рендеринг компонентов, хранение данных для серверного рендеринга или подготовку ответа для API.

Вложенные маршруты и цепочка возвратов

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

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

При обращении к /dashboard/stats возвращается результат дочернего маршрута 'Статистика'. Если дочерний маршрут не найден, возвращается результат родительского action.

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

Обработка ошибок и возврат null или undefined

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

{
  path: '/optional',
  action: () => null
}

Если маршрут возвращает undefined, Universal Router продолжает поиск следующего подходящего маршрута, что полезно для реализации fallback-маршрутов.

Взаимодействие с серверным рендерингом

При использовании Universal Router на сервере возвращаемое значение action часто используется для генерации HTML:

const html = await router.resolve({ pathname: '/home' });
res.send(`<html><body>${html}</body></html>`);

Асинхронные action позволяют выполнять запросы к базе данных или API перед рендерингом, обеспечивая динамический контент без необходимости отдельного фронтенд-запроса.

Резюме ключевых принципов

  • action возвращает любое значение: строку, объект, Promise, null или undefined.
  • Аргументы context и params дают доступ к параметрам URL и дополнительным данным.
  • Асинхронные возвраты разрешаются автоматически.
  • Вложенные маршруты используют цепочку возвратов для обработки дочерних маршрутов.
  • Возврат undefined позволяет перейти к следующему маршруту, что удобно для fallback или динамической маршрутизации.

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

Оглавление