Инспектирование состояния роутера

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

Доступ к текущему маршруту

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

import UniversalRouter from 'universal-router';

const routes = [
  { path: '/', action: () => 'Главная' },
  { path: '/about', action: () => 'О нас' },
  { path: '/user/:id', action: ({ params }) => `Пользователь ${params.id}` }
];

const router = new UniversalRouter(routes);

async function inspectRoute(path) {
  const routeResult = await router.resolve(path);
  console.log(routeResult);
}

inspectRoute('/user/42');

В этом примере объект routeResult содержит результат вызова action и позволяет понять, какой маршрут был выбран и какие параметры были переданы.

Объект контекста

Universal Router строит контекст маршрута, который передается в каждый обработчик action. Этот контекст включает:

  • path — путь запроса.
  • params — объект с параметрами маршрута.
  • query — объект с параметрами query string (если используется парсер query).
  • route — объект маршрута, который был выбран.
  • parent — родительский маршрут при вложенной маршрутизации.

Контекст можно использовать для инспекции и логирования:

const routes = [
  {
    path: '/user/:id',
    action: (context) => {
      console.log('Текущий маршрут:', context.route.path);
      console.log('Параметры:', context.params);
      return `Пользователь ${context.params.id}`;
    }
  }
];

Вложенные маршруты и их инспекция

Universal Router поддерживает вложенные маршруты, что позволяет строить сложные маршрутизационные деревья. Для инспекции состояния важно понимать, что каждый вложенный маршрут формирует свой контекст и наследует параметры от родителя.

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

При разрешении /dashboard/profile/7 контекст вложенного маршрута будет содержать параметры id и ссылку на родительский маршрут /dashboard. Это позволяет строить сложные логику проверки состояния, авторизации и динамической подгрузки данных.

Получение цепочки маршрутов

Для детальной инспекции часто необходимо узнать полный путь маршрута в виде цепочки маршрутов. Это можно сделать, анализируя объект route и его свойства parent.

async function getRouteChain(path) {
  const context = await router.resolve(path, { context: {} });
  const chain = [];
  let current = context.route;

  while (current) {
    chain.unshift(current.path);
    current = current.parent;
  }

  return chain;
}

getRouteChain('/dashboard/profile/7').then(console.log);
// Вывод: ['dashboard', 'profile/:id']

Такая цепочка позволяет отследить все уровни маршрута, что полезно для построения хлебных крошек или динамических навигационных элементов.

Логирование и отладка

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

  • вывод параметров маршрута,
  • отслеживание вызовов вложенных маршрутов,
  • проверку условий авторизации или разрешений,
  • динамическую подстановку данных в зависимости от маршрута.

Пример отладочной функции:

async function logRoute(path) {
  const context = await router.resolve(path, {
    context: {
      log: (message) => console.log(`[ROUTER LOG] ${message}`)
    }
  });

  if (context.log) context.log(`Разрешён маршрут: ${context.route.path}`);
}

Использование асинхронных действий

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

  • получать параметры перед рендерингом,
  • проверять состояние авторизации перед загрузкой компонента,
  • подгружать динамические данные маршрута.
{
  path: '/user/:id',
  async action({ params }) {
    const user = await fetchUser(params.id);
    return user.name;
  }
}

Контекст маршрута здесь может использоваться для логирования этапов загрузки и состояния пользователя.

Выводы по инспекции состояния

Инспектирование состояния роутера в Universal Router основывается на анализе контекста маршрута, объекта route и его параметров. Оно позволяет:

  • точно понимать текущий путь и выбранный маршрут,
  • получать доступ к параметрам и query string,
  • анализировать вложенные маршруты и их наследуемые параметры,
  • строить цепочки маршрутов для динамических интерфейсов,
  • логировать и отлаживать маршруты на любом уровне вложенности.

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

Оглавление