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

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

Значение базового пути

Базовый путь (base path) используется для того, чтобы все маршруты правильно сопоставлялись с текущей структурой URL на сервере. По умолчанию Page.js предполагает, что приложение размещено в корне сайта (/). Если приложение находится в подкаталоге, например /app/, необходимо явно указать этот базовый путь.

Пример без базового пути:

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

Если это приложение размещено на example.com/app/, переход на /home вызовет ошибку, так как браузер будет искать страницу по адресу example.com/home.

Установка базового пути

Базовый путь задаётся при инициализации Page.js с помощью функции page.base(). Она принимает один аргумент — строку, представляющую путь, с которого начинается маршрутизация.

page.base('/app');
page('/home', () => {
  console.log('Главная страница приложения');
});
page();

После вызова page.base('/app') все маршруты будут рассчитываться относительно /app. То есть маршрут /home станет доступен по URL example.com/app/home.

Важные особенности базового пути

  1. Слэш в конце Рекомендуется указывать базовый путь без завершающего слэша. Page.js корректно обрабатывает оба варианта, но единообразие упрощает поддержку кода.

    page.base('/app'); // предпочтительно
page.base('/app/'); // тоже работает

  2. Маршруты и подкаталоги Если приложение использует вложенные маршруты, базовый путь автоматически учитывается при формировании URL:

    page.base('/app');

page('/dashboard', () => console.log('Панель управления'));
page('/dashboard/settings', () => console.log('Настройки панели'));
page();

    Переход на /app/dashboard/settings корректно вызовет соответствующий обработчик.

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

Динамическая смена базового пути

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

const BASE_PATH = process.env.NODE_ENV === 'production' ? '/app' : '';
page.base(BASE_PATH);

page('/', () => console.log('Главная'));
page('/profile', () => console.log('Профиль'));
page();

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

Проверка работы базового пути

После настройки базового пути полезно проверить, что маршруты работают корректно:

  • Перейти на главный маршрут: example.com/app/
  • Перейти на внутренний маршрут: example.com/app/profile
  • Обновить страницу и убедиться, что приложение корректно отображается

Если маршруты не срабатывают, необходимо убедиться, что:

  • page.base() вызван до объявления маршрутов
  • URL сервера соответствует базовому пути
  • Нет конфликтов с другими библиотеками, изменяющими history.pushState

Комбинирование базового пути с параметрами маршрута

Базовый путь корректно работает с динамическими сегментами маршрута:

page.base('/app');

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

Запрос example.com/app/user/42 вызовет обработчик и выведет ID пользователя: 42. Page.js автоматически удаляет базовый путь из URL перед сопоставлением с маршрутом.

Базовый путь является фундаментальным элементом настройки Page.js, обеспечивающим корректное сопоставление URL и стабильную работу SPA вне зависимости от расположения приложения на сервере или подкаталогах. Правильное использование page.base() упрощает управление маршрутами, предотвращает ошибки при обновлении страницы и позволяет гибко адаптировать приложение к различным окружениям.

Оглавление