Объект context и его свойства

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

Основные свойства объекта context

  1. pathname Строка, содержащая путь запроса, который нужно сопоставить с маршрутом. Этот путь передаётся в router.resolve() и является основой для поиска подходящего маршрута.

    const context = { pathname: '/users/42' };

  2. route Ссылка на текущий маршрут, который был сопоставлен с pathname. Изначально это значение отсутствует и заполняется после успешного сопоставления маршрута.

    console.log(context.route.name); // 'userDetail'

  3. baseUrl Используется для вложенных маршрутов. Отражает часть пути, которая уже была обработана родительским маршрутом, позволяя корректно формировать относительные URL для дочерних маршрутов.

    const routes = [
  {
    path: '/users',
    children: [
      { path: '/:id', name: 'userDetail' }
    ]
  }
];
// Для '/users/42' baseUrl будет '/users'

  4. params Объект, содержащий параметры маршрута, извлечённые из пути. Ключи соответствуют именам параметров, указанным в path.

    context.params = { id: '42' };

  5. query Объект с query-параметрами, если они передаются в URL. Universal Router не парсит их автоматически, но можно передавать в context при вызове resolve().

    const context = { pathname: '/search', query: { q: 'javascript' } };
console.log(context.query.q); // 'javascript'

  6. parent Ссылка на родительский context при использовании вложенных маршрутов. Позволяет обращаться к данным предыдущего уровня маршрутизации.

    context.parent.baseUrl; // '/users'

  7. next Функция, позволяющая передавать управление следующему подходящему маршруту, если текущий обработчик решает не завершать обработку. Это ключевой механизм для middleware-подобного поведения.

    function handler(ctx, next) {
  if (!ctx.params.id) return next();
  return `User ${ctx.params.id}`;
}

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

    context.title = 'Профиль пользователя';

Использование context в маршрутах

Пример простого маршрута

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/users/:id',
    name: 'userDetail',
    action: (context) => {
      return `Пользователь с ID: ${context.params.id}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/users/42' }).then(result => {
  console.log(result); // Пользователь с ID: 42
});

В этом примере context.params.id автоматически получает значение из URL, а context.route содержит объект маршрута с name и path.

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

const routes = [
  {
    path: '/users',
    children: [
      {
        path: '/:id',
        action: (ctx) => `Профиль пользователя ${ctx.params.id}, базовый URL: ${ctx.baseUrl}`
      }
    ]
  }
];

const router = new UniversalRouter(routes);
router.resolve({ pathname: '/users/42' }).then(console.log);
// Профиль пользователя 42, базовый URL: /users

Здесь baseUrl используется для корректного формирования относительных ссылок внутри вложенного маршрута.

Middleware-подобная логика с next

const routes = [
  {
    path: '/admin',
    action: (ctx, next) => {
      if (!ctx.user || !ctx.user.isAdmin) return 'Доступ запрещён';
      return next();
    },
    children: [
      { path: '/dashboard', action: () => 'Админ панель' }
    ]
  }
];

context.next позволяет маршруту передать управление дочерним маршрутам только при выполнении определённых условий, обеспечивая гибкий контроль доступа.

Ключевые моменты работы с context

  • context создаётся для каждого вызова resolve() и не хранит состояние между вызовами, если его явно не сохранять.
  • Свойства params, baseUrl и route автоматически заполняются Universal Router, остальные можно добавлять для нужд приложения.
  • context.parent и context.next делают возможной работу с вложенными маршрутизируемыми структурами и middleware-логикой.
  • Любые произвольные данные (например, user, title, meta) могут быть помещены в context и использоваться в любом маршруте.

Использование объекта context обеспечивает полную динамику маршрутизации: параметры, вложенность, middleware и состояние, создавая единый интерфейс для управления всеми аспектами обработки URL в приложении на JavaScript.

Оглавление