Навигация назад и вперед

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

История браузера и методы Page.js

Page.js опирается на стандартное window.history, предоставляя методы:

  • page(path, callback) — определяет маршрут и обработчик.
  • page.show(path, [state], [dispatch]) — программно инициирует переход на указанный путь.
  • page.back() — инициирует переход на предыдущую страницу истории.
  • page.start([options]) — активирует маршрутизацию.

Основные возможности History API

Page.js скрывает работу с History API, но важно понимать базовые методы:

  • history.pushState(state, title, url) — добавляет новый элемент в стек истории без перезагрузки страницы.
  • history.replaceState(state, title, url) — заменяет текущий элемент истории.
  • Событие popstate вызывается при навигации назад или вперед, Page.js использует его для обработки маршрутов.

Программное управление навигацией

Переход на предыдущую страницу

Для перехода назад в истории используется метод page.back(). Он эквивалентен вызову history.back(), но с интеграцией обработчиков маршрутов Page.js:

// Переход на предыдущий маршрут
document.getElementById('backBtn').addEventListener('click', () => {
  page.back();
});

Метод page.back() учитывает текущий стек маршрутов, гарантируя, что корректный обработчик будет вызван при возврате на предыдущий маршрут.

Переход на следующий маршрут

Метод page.forward() в Page.js отсутствует как отдельная функция, но стандартный браузерный history.forward() полностью поддерживается. Для интеграции с маршрутизатором Page.js достаточно вызвать:

document.getElementById('forwardBtn').addEventListener('click', () => {
  history.forward();
});

Page.js автоматически обработает вызов popstate, вызвав соответствующий маршрут.

Обработка событий popstate

Page.js подписывается на событие popstate для реагирования на действия пользователя при нажатии кнопок «назад» и «вперед». Внутри библиотеки это реализуется через:

window.addEventListener('popstate', (event) => {
  const path = window.location.pathname;
  page._dispatch(path, event.state);
});

Метод _dispatch вызывает соответствующий обработчик маршрута, передавая объект состояния, если он был установлен через page.show().

Программные переходы и состояние

Page.js позволяет передавать объект состояния при переходе:

page.show('/profile', { from: 'dashboard' });

При навигации назад или вперед объект состояния доступен в обработчике маршрута через ctx.state:

page('/profile', (ctx) => {
  console.log(ctx.state.from); // 'dashboard'
});

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

Смешанные сценарии навигации

Назад с программным переходом

Если требуется реализовать кнопку «назад» внутри интерфейса:

function goBack() {
  if (history.length > 1) {
    page.back();
  } else {
    page.show('/home'); // fallback на главную страницу
  }
}

Такой подход предотвращает уход на несуществующие страницы в истории.

Управление пользовательским поведением

При использовании Page.js можно перехватывать попытки пользователя уйти с текущей страницы с помощью:

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '';
});

Хотя это не напрямую связано с Page.js, сочетание с навигацией назад позволяет контролировать состояние приложения перед изменением маршрута.

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

  • Всегда использовать ctx.state для хранения данных, которые могут понадобиться при возврате на предыдущий маршрут.
  • Для SPA-страниц избегать полной перезагрузки при навигации назад; Page.js автоматически вызывает соответствующий обработчик.
  • Комбинировать программные переходы через page.show() с естественными переходами через кнопки браузера для консистентного UX.

Важные нюансы

  • Page.js не хранит историю в памяти; она полностью зависит от браузерного History API.
  • При использовании page.replace() текущая запись истории заменяется, что влияет на кнопки «назад» и «вперед».
  • Для сложных сценариев, например, динамических маршрутов с параметрами, важно сохранять состояние через ctx.state, иначе при возврате данные могут потеряться.

Навигация назад и вперед в Page.js строится на взаимодействии с History API, обработке событий popstate и передаче состояния маршрута. Грамотное использование этих инструментов позволяет создавать плавные SPA-интерфейсы с корректной историей страниц, минимизируя перезагрузки и обеспечивая предсказуемое поведение навигации.

Оглавление