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

В Page.js каждый маршрут при срабатывании получает объект контекста ctx, который содержит всю необходимую информацию о текущем переходе. Контекст — это ключ к доступу к параметрам URL, состоянию маршрута, информации о query-параметрах и пользовательских данных, переданных между хэндлерами.

Доступ к параметрам URL

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

page('/user/:id', ctx => {
    console.log(ctx.params.id); // Выведет значение параметра id
});

Ключевые моменты:

  • ctx.params — объект, содержащий все динамические сегменты маршрута.
  • Названия полей соответствуют именам после двоеточия (:) в шаблоне маршрута.
  • Для нескольких параметров они аккуратно собираются в один объект:
page('/user/:userId/post/:postId', ctx => {
    console.log(ctx.params.userId);
    console.log(ctx.params.postId);
});

Query-параметры

Page.js не парсит query-параметры автоматически, но они доступны через свойство ctx.querystring. Для удобства можно использовать стандартный URLSearchParams:

page('/search', ctx => {
    const params = new URLSearchParams(ctx.querystring);
    const query = params.get('q');
    const pageNumber = params.get('page');
    console.log(query, pageNumber);
});

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

  • ctx.querystring содержит строку после ?.
  • Использование URLSearchParams позволяет безопасно работать с несколькими значениями одного ключа.
  • Можно легко конвертировать параметры в объект:
const paramsObj = Object.fromEntries(new URLSearchParams(ctx.querystring));

Передача данных между хэндлерами

Контекст также служит переносчиком данных между промежуточными и основными обработчиками:

page('/dashboard', authMiddleware, dashboardHandler);

function authMiddleware(ctx, next) {
    ctx.user = { id: 1, name: 'Alice' };
    next();
}

function dashboardHandler(ctx) {
    console.log(ctx.user.name); // Alice
}

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

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

Работа с состоянием маршрута

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

page('/cart', ctx => {
    ctx.items = [{ id: 1, name: 'Book' }, { id: 2, name: 'Pen' }];
    renderCart(ctx.items);
});

Ключевые моменты:

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

Навигация с передачей параметров

Иногда требуется программно перейти на маршрут с параметрами и query:

page.redirect(`/user/${userId}?tab=profile`);

После перехода в ctx будут доступны:

ctx.params.id     // userId
ctx.querystring   // 'tab=profile'

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

Расширенные возможности контекста

  • ctx.path — полный путь маршрута, включая query-параметры.
  • ctx.pathname — путь без query-параметров.
  • ctx.title — можно использовать для хранения заголовка страницы.
  • ctx.state — объект для хранения дополнительного состояния между переходами.

Пример:

page('/profile/:id', ctx => {
    ctx.title = `Профиль пользователя ${ctx.params.id}`;
    ctx.state.isAdmin = true;
    renderProfile(ctx.params.id, ctx.state.isAdmin);
});

Практические рекомендации

  1. Всегда использовать ctx.params для динамических сегментов, а не парсить URL вручную.
  2. Query-параметры лучше конвертировать в объект с помощью URLSearchParams для удобного доступа.
  3. Для передачи данных между middleware и основным хэндлером использовать ctx напрямую, избегая глобальных переменных.
  4. Не хранить в контексте большие объёмы данных, которые не нужны только для текущего перехода, чтобы избежать утечек памяти.
  5. Инициализировать свойства контекста в каждом хэндлере, если они критичны для логики страницы.

Контекст в Page.js является универсальным инструментом для доступа к параметрам маршрута, query-параметрам и состоянию, позволяя строить гибкие и чистые маршрутизации в одностраничных приложениях.

Оглавление