Утилиты и хелперы

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

resolveRoute и асинхронная обработка

Метод resolveRoute — это ключевой хелпер для обработки маршрутов. Он принимает объект маршрута и контекст и возвращает результат выполнения компонента маршрута. Используется для интеграции с асинхронными данными, например, загрузки контента с API перед отображением страницы.

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/users/:id',
    async action(context) {
      const user = await fetchUser(context.params.id);
      return `<h1>${user.name}</h1>`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/users/42' }).then(html => {
  console.log(html);
});

Особенности:

  • Поддержка промисов и асинхронных функций в action.
  • Автоматическое разрешение маршрута с учетом параметров.
  • Можно использовать с любыми источниками данных (API, локальное хранилище).

Контекст маршрута (context)

Контекст (context) — это объект, который передаётся всем функциям action маршрутов. Он содержит параметры маршрута, путь, query-параметры и другие данные, которые могут понадобиться для обработки маршрута.

{
  pathname: '/users/42',
  params: { id: '42' },
  query: { page: '1' },
  route: {...},
  baseUrl: ''
}

Полезные возможности контекста:

  • Переопределение контекста при вызове resolve, позволяя передавать дополнительные данные.
  • Доступ к родительским маршрутам через context.parent.
  • Упрощает реализацию авторизации и проверки прав доступа.

match и динамические маршруты

Хелпер match позволяет сопоставлять текущий путь с шаблоном маршрута. Он используется внутри маршрутов для проверки соответствия сложных динамических путей.

import { match } from 'universal-router';

const route = { path: '/posts/:id' };
const matched = match(route.path, '/posts/123');

console.log(matched); // { id: '123' }

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

  • Поддержка параметров пути с любыми именами.
  • Работа с optional и nested параметрами.
  • Возможность быстрого извлечения параметров без полной резолюции маршрута.

Встроенные хелперы для работы с ошибками

Universal Router предоставляет встроенные механизмы обработки ошибок через объект context. Это позволяет создавать глобальные и локальные обработчики ошибок, минимизируя дублирование кода.

const router = new UniversalRouter(routes, {
  resolveRoute: (context, route) => {
    try {
      return route.action(context);
    } catch (err) {
      return `<h1>Error: ${err.message}</h1>`;
    }
  }
});

Особенности:

  • Легкая интеграция с логированием ошибок.
  • Позволяет вернуть кастомный результат при ошибке.
  • Можно комбинировать с асинхронными маршрутами.

Утилиты для работы с вложенными маршрутами

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

const routes = [
  {
    path: '/dashboard',
    children: [
      { path: '/stats', action: () => 'Stats Page' },
      { path: '/settings', action: () => 'Settings Page' }
    ]
  }
];

const router = new UniversalRouter(routes);

Преимущества вложенных хелперов:

  • Автоматическое формирование полного пути /dashboard/stats.
  • Поддержка наследования context от родителя.
  • Упрощает создание модульной архитектуры маршрутов.

Асинхронная композиция хелперов

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

{
  path: '/lazy',
  async action(context) {
    const module = await import('./LazyComponent.js');
    return module.render(context);
  }
}

Особенности такой композиции:

  • Поддержка ES-модулей и динамического импорта.
  • Гибкая интеграция с React, Vue или другими UI-фреймворками.
  • Можно применять к любым уровням маршрутов, включая вложенные.

Итоговое применение утилит

Хелперы Universal Router позволяют:

  • Быстро сопоставлять маршруты с путями.
  • Работать с параметрами и query-параметрами.
  • Организовывать вложенные маршруты и контекст.
  • Обрабатывать ошибки и асинхронные операции.
  • Интегрироваться с динамическими компонентами.

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

Оглавление