Базовые пути для вложенных роутеров

Page.js — это лёгкая клиентская библиотека для управления маршрутами в одностраничных приложениях (SPA) на JavaScript. Один из ключевых аспектов работы с Page.js — поддержка вложенных маршрутов, что позволяет создавать сложные структуры URL с разными уровнями вложенности.

Настройка базового маршрутизатора

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

import page from 'page';

// Главная страница
page('/', () => {
  console.log('Главная страница');
});

// Страница пользователей
page('/users', () => {
  console.log('Список пользователей');
});

// Инициализация роутера
page();

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

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

Вложенные маршруты строятся относительно базового маршрута. Например, если есть страница /users, можно добавить вложенные маршруты /users/:id и /users/:id/edit.

page('/users/:id', ctx => {
  console.log(`Просмотр профиля пользователя с ID: ${ctx.params.id}`);
});

page('/users/:id/edit', ctx => {
  console.log(`Редактирование пользователя с ID: ${ctx.params.id}`);
});

:id — параметр маршрута. Page.js автоматически добавляет его в объект ctx.params.
Вложенные маршруты обрабатываются последовательно, поэтому порядок их объявления важен: более специфичные маршруты должны идти раньше общих.

Использование базового пути (Base Path) для вложенных роутеров

Чтобы не дублировать общий префикс для каждого маршрута, можно использовать функцию-обёртку для вложенных роутеров:

function createUserRouter(basePath = '/users') {
  page(`${basePath}/`, () => {
    console.log('Список пользователей');
  });

  page(`${basePath}/:id`, ctx => {
    console.log(`Просмотр профиля пользователя с ID: ${ctx.params.id}`);
  });

  page(`${basePath}/:id/edit`, ctx => {
    console.log(`Редактирование пользователя с ID: ${ctx.params.id}`);
  });
}

// Инициализация вложенного роутера
createUserRouter();
page();

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

Упрощает поддержку маршрутов при изменении структуры URL.
Позволяет легко создавать повторно используемые подмаршрутизаторы для разных разделов приложения.
Избегает ошибок при добавлении новых вложенных маршрутов.

Переход по вложенным маршрутам

Page.js предоставляет функцию page.show(path) для программной навигации. Для вложенных маршрутов это особенно удобно:

page.show('/users/42');      // Переход к профилю пользователя с ID 42
page.show('/users/42/edit'); // Переход к форме редактирования

Важно помнить:

Параметры маршрута остаются доступными через объект ctx.params.
Любая логика, завязанная на DOM, должна выполняться после рендеринга страницы или компонента.

Middleware для вложенных маршрутов

Page.js поддерживает middleware, что позволяет добавлять общую логику для группы маршрутов. Для вложенных роутеров это особенно полезно.

function userMiddleware(ctx, next) {
  console.log('Загрузка данных пользователя...');
  ctx.user = { id: ctx.params.id, name: 'John Doe' };
  next();
}

// Применяем middleware к вложенному маршруту
page('/users/:id', userMiddleware, ctx => {
  console.log(`Пользователь: ${ctx.user.name}`);
});

page('/users/:id/edit', userMiddleware, ctx => {
  console.log(`Редактирование пользователя: ${ctx.user.name}`);
});

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

Унификация логики для всех вложенных маршрутов.
Легкость внедрения авторизации, проверки прав и предзагрузки данных.
Повышение читаемости и структурированности кода.

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

В сложных приложениях иногда требуется создавать маршруты динамически на основе данных (например, из API). Page.js позволяет это делать:

const sections = ['profile', 'settings', 'history'];

sections.forEach(section => {
  page(`/users/:id/${section}`, ctx => {
    console.log(`Раздел ${section} для пользователя ${ctx.params.id}`);
  });
});

Каждый маршрут формируется на основе массива или конфигурации.
Поддерживается любая глубина вложенности.
Легко расширять, добавляя новые секции без изменения основной структуры.