Передача управления дочерним маршрутам

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

Определение дочерних маршрутов

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

Пример базовой структуры:

import UniversalRouter from 'universal-router';

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

const router = new UniversalRouter(routes);

В этом примере, запрос к /dashboard/stats вызовет сначала родительский маршрут /dashboard, после чего управление будет передано дочернему маршруту /stats.

Использование resolveRoute для передачи управления

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

Пример с условной передачей:

const routes = [
  {
    path: '/dashboard',
    action: async ({ next }) => {
      console.log('Родительский маршрут /dashboard');
      return next(); // передача управления дочерним маршрутам
    },
    children: [
      {
        path: '/stats',
        action: () => 'Статистика'
      },
      {
        path: '/settings',
        action: () => 'Настройки'
      }
    ]
  }
];

const router = new UniversalRouter(routes);
router.resolve('/dashboard/stats').then(console.log); // Статистика

Здесь next() запускает поиск подходящего дочернего маршрута и возвращает результат его action. Без вызова next() дочерние маршруты не будут обработаны, что позволяет реализовать сценарии с условной маршрутизацией.

Доступ к параметрам и контексту

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

const routes = [
  {
    path: '/user/:id',
    action: ({ params, next, context }) => {
      context.userId = params.id; 
      return next();
    },
    children: [
      {
        path: '/profile',
        action: ({ context }) => `Профиль пользователя ${context.userId}`
      },
      {
        path: '/posts',
        action: ({ context }) => `Посты пользователя ${context.userId}`
      }
    ]
  }
];

const router = new UniversalRouter(routes);
router.resolve('/user/42/profile').then(console.log); // Профиль пользователя 42

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

Асинхронная обработка и последовательность вызовов

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

const routes = [
  {
    path: '/app',
    action: async ({ next }) => {
      await fetchData();
      return next();
    },
    children: [
      {
        path: '/dashboard',
        action: async () => await renderDashboard()
      }
    ]
  }
];

next() внутри асинхронного action гарантирует, что дочерние маршруты выполнятся только после завершения всех операций родителя.

Условная маршрутизация дочерних элементов

Передача управления позволяет реализовать условные маршруты, например, на основе авторизации пользователя:

const routes = [
  {
    path: '/admin',
    action: ({ context, next }) => {
      if (!context.isAdmin) return 'Доступ запрещен';
      return next();
    },
    children: [
      { path: '/users', action: () => 'Список пользователей' },
      { path: '/settings', action: () => 'Настройки' }
    ]
  }
];

Без вызова next() дочерние маршруты не обрабатываются, что обеспечивает гибкую защиту маршрутов на уровне родителя.

Важные моменты

  • children не обязательно должны иметь полный путь: их path может быть относительным, что позволяет строить вложенную маршрутизацию без дублирования префиксов.
  • Контекст (context) передается через все уровни маршрутов, обеспечивая единое состояние приложения.
  • Вызов next() обязателен для передачи управления, но может быть вызван с параметрами, влияющими на дальнейший поиск маршрута.

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

Оглавление