Динамическая генерация маршрутов

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

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

  • path — путь маршрута, может содержать параметры (/user/:id).
  • action — функция, вызываемая при совпадении маршрута.
  • children — вложенные маршруты, также могут генерироваться динамически.

Пример динамического создания маршрутов:

import UniversalRouter from 'universal-router';

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const router = new UniversalRouter({
  async resolveRoute(context) {
    if (context.pathname.startsWith('/user/')) {
      const id = parseInt(context.pathname.split('/')[2], 10);
      const user = users.find(u => u.id === id);
      if (user) {
        return `Профиль пользователя: ${user.name}`;
      }
    }
  },
  routes: async () => {
    return users.map(user => ({
      path: `/user/${user.id}`,
      action: () => `Динамический маршрут для ${user.name}`
    }));
  }
});

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

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

Universal Router поддерживает динамические сегменты в пути (:param). При динамическом создании маршрутов важно правильно сопоставлять параметры:

const router = new UniversalRouter({
  routes: [
    {
      path: '/posts/:postId',
      action: ({ params }) => {
        return `Пост с ID: ${params.postId}`;
      }
    }
  ]
});

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

Вложенные маршруты и lazy-loading

Вложенные маршруты создаются через свойство children. При динамическом формировании это может быть функцией, возвращающей массив маршрутов:

const router = new UniversalRouter({
  routes: [
    {
      path: '/categories',
      children: async () => {
        const categories = await fetchCategories();
        return categories.map(cat => ({
          path: `${cat.id}`,
          action: () => `Категория: ${cat.name}`
        }));
      }
    }
  ]
});

Такой подход позволяет:

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

Асинхронные маршруты и контекст

Universal Router поддерживает асинхронные функции в action и routes. Контекст context передаётся во все уровни маршрута и содержит ключевые свойства:

  • pathname — текущий путь.
  • query — объект с параметрами запроса.
  • baseUrl — базовый путь для вложенных маршрутов.
  • router — экземпляр роутера, что позволяет использовать рекурсивный вызов.

Пример асинхронного маршрута:

const router = new UniversalRouter({
  routes: [
    {
      path: '/products/:id',
      async action({ params }) {
        const product = await fetchProductById(params.id);
        return product ? `Товар: ${product.name}` : 'Товар не найден';
      }
    }
  ]
});

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

Динамическая навигация и обновление маршрутов

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

async function updateRoutes() {
  const newRoutes = await fetchNewRoutes();
  router.root = { routes: newRoutes };
}

router.resolve('/new-path');

Таким образом, можно изменять маршруты без перезагрузки страницы, интегрируя маршрутизацию с реальным состоянием приложения.

Ключевые моменты динамических маршрутов

  • Динамическая генерация упрощает работу с большим числом однотипных маршрутов.
  • Параметры пути позволяют создавать маршруты-шаблоны.
  • Вложенные маршруты и lazy-loading повышают производительность.
  • Асинхронные функции в routes и action делают маршрутизацию гибкой.
  • Обновление маршрутов на лету позволяет интегрировать роутер с серверными данными и состоянием приложения.

Эти принципы обеспечивают мощную, масштабируемую и гибкую маршрутизацию в любых современных JavaScript-приложениях.

Оглавление