Переход с других роутеров

При замене существующего роутера на Page.js в проекте важно понимать, как организовать обработку переходов и сохранить совместимость с уже существующей логикой маршрутизации. Page.js предоставляет лёгкий способ управления URL и состояния приложения без полной перезагрузки страницы, но переход с других библиотек требует тщательного планирования.

Инициализация и базовая настройка

Первым шагом является подключение Page.js и настройка базового маршрутизатора:

import page from 'page';

// Настройка базового маршрута
page('/', () => {
  console.log('Главная страница');
});

page('/about', () => {
  console.log('О странице');
});

// Запуск роутера
page();

При переходе с другого роутера важно убедиться, что все текущие маршруты проекта корректно перенесены в Page.js. Необходимо переписать их в виде функций обратного вызова, соответствующих URL.

Работа с существующими URL

Если ранее использовался роутер с hash-навигацией (#/about) или с History API (pushState), Page.js позволяет использовать оба подхода:

  • History API (по умолчанию): Подходит для современных приложений с clean URL.
  • Hash-based routing: Может использоваться при ограничениях на серверной части или при невозможности конфигурации сервера:
page({
  hashbang: true
});

При переходе с роутера, использовавшего hash, важно корректно перенаправлять старые ссылки на новые маршруты Page.js, чтобы избежать «404 Not Found» на сервере.

Сохранение логики переходов

Часто в старых проектах функции перехода оформлены через router.navigate() или аналог. Page.js заменяет их вызовом page(path):

// Старый роутер
router.navigate('/contact');

// Page.js
page('/contact');

Для сохранения совместимости можно создать обёртку:

function navigateTo(path) {
  page(path);
}

Это позволяет постепенно заменять старые вызовы без изменения всей кодовой базы сразу.

Использование middleware для перенаправлений

Page.js поддерживает middleware, которые позволяют выполнять действия перед обработкой маршрута. Это удобно при переносе старой логики проверки авторизации или сохранения состояния:

page('/dashboard', authCheck, dashboardPage);

function authCheck(ctx, next) {
  if (!user.isLoggedIn) {
    page.redirect('/login');
  } else {
    next();
  }
}

Middleware упрощает перенос существующих хуков и проверок из предыдущего роутера.

Обработка динамических сегментов URL

Page.js легко работает с параметрами маршрута, что позволяет перенести старые роуты с переменными:

page('/user/:id', (ctx) => {
  console.log('ID пользователя:', ctx.params.id);
});

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

Совместимость с ссылками и событиями

Для корректного перехвата кликов по ссылкам необходимо заменить стандартные <a href> на Page.js-совместимые:

document.querySelectorAll('a[data-link]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    page(link.getAttribute('href'));
  });
});

Использование data-link или класса позволяет постепенно переводить существующие элементы без глобальной перестройки разметки.

Перенаправления и редиректы

Page.js поддерживает перенаправления через page.redirect(). Это особенно важно при переходе с роутеров, которые автоматически меняли URL:

page('/old-route', () => {
  page.redirect('/new-route');
});

Редиректы можно использовать для сохранения SEO и корректной работы старых закладок пользователей.

Интеграция с серверной маршрутизацией

При использовании History API необходимо настроить сервер на возврат index.html для всех маршрутов Page.js:

location / {
    try_files $uri /index.html;
}

Это предотвращает ошибки при прямом вводе URL в браузере и обеспечивает плавный переход с серверного роутера на Page.js.

Советы по постепенной миграции

  1. Сохранять старый роутер рядом с Page.js до полной замены.
  2. Создавать обёртки для навигации, чтобы минимизировать изменения в коде.
  3. Переносить маршруты поэтапно, начиная с базовых страниц.
  4. Использовать middleware для всех проверок состояния и авторизации.
  5. Тестировать переходы и редиректы для старых ссылок и прямого ввода URL.

Эти подходы позволяют плавно перейти на Page.js без полной переработки существующей маршрутизации и сохранить функциональность старого приложения.

Оглавление