Работа с историей браузера

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

Настройка режима истории

Navigo поддерживает два основных режима:

  1. Hash mode — URL с хэшем (/#/home). Используется в старых браузерах или когда сервер не поддерживает History API. Изменение маршрута происходит через window.location.hash.

  2. History mode — HTML5 History API (/home). Позволяет изменять URL без перезагрузки страницы через методы pushState, replaceState и отслеживать события popstate.

Для активации History API используется опция useHash: false при создании экземпляра Navigo:

const router = new Navigo('/', { useHash: false });
  • '/‘ — корневая точка приложения, от которой строятся все маршруты.
  • useHash: false — переключает роутер на History API.
  • По умолчанию Navigo работает в hash-режиме.

Методы для работы с историей

pushState

Метод router.navigate(path) изменяет URL и добавляет новую запись в историю браузера, аналогично вызову history.pushState():

router.navigate('/about');
  • URL меняется на /about.
  • Событие popstate не вызывается при программной навигации, но роутер отрабатывает соответствующий обработчик маршрута.
  • Можно передать объект с параметрами, который будет храниться в истории:
router.navigate('/profile', { state: { userId: 42 } });

replaceState

Метод router.navigate(path, { replace: true }) заменяет текущую запись в истории, аналог history.replaceState():

router.navigate('/login', { replace: true });
  • Используется для редиректов, логина и других действий, где не нужно добавлять новый шаг в историю.
  • Не создаёт лишних записей, кнопка «Назад» вернёт к предыдущему состоянию, минуя заменённый маршрут.

Отслеживание переходов назад и вперёд

Navigo автоматически слушает событие popstate, которое возникает при нажатии кнопок «Назад» и «Вперед». Обработчики маршрутов вызываются автоматически, поэтому дополнительные подписки не требуются.

router.on('/dashboard', () => {
    console.log('Dashboard открыт через историю браузера');
});

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

  • При прямом переходе по URL через адресную строку popstate не срабатывает, вызывается только обработчик маршрута.
  • При нажатии «Назад» или «Вперед» popstate инициирует вызов маршрута с текущим URL.
  • История браузера синхронизирована с навигацией, что обеспечивает корректную работу SPA.

Работа с объектом состояния

History API позволяет хранить состояние страницы вместе с URL. Navigo поддерживает это через объект state:

router.navigate('/settings', { state: { tab: 'privacy' } });
  • Доступ к объекту состояния осуществляется через router.lastRouteResolved().data или history.state.
  • Используется для передачи параметров между маршрутами без изменения URL-параметров.
  • Особенно полезно для сохранения текущих вкладок, фильтров и форм.

Программный переход и возврат

Navigo позволяет эмулировать действия браузера:

// Программный переход к маршруту
router.navigate('/home');

// Возврат на предыдущий маршрут
window.history.back();

// Переход вперёд
window.history.forward();
  • Вызовы history.back() и history.forward() корректно отрабатываются роутером, вызывая соответствующие обработчики маршрутов.
  • Это обеспечивает полное соответствие поведения приложения стандартному поведению браузера.

Работа с базовым URL (root)

При использовании History API важно правильно указывать базовый путь приложения. Он задаётся при создании Navigo:

const router = new Navigo('/app', { useHash: false });
  • /app — базовый путь. Все маршруты будут строиться относительно него (/app/home, /app/profile).
  • Это важно при размещении SPA в поддиректории сервера.
  • Navigo автоматически корректирует URL и историю, чтобы кнопки «Назад» и «Вперед» работали правильно.

Обработка ошибок навигации

Navigo позволяет определить обработчик для несуществующих маршрутов:

router.notFound(() => {
    console.log('Маршрут не найден');
});
  • Вызывается, если URL не совпадает с зарегистрированными маршрутами.
  • Обработчик учитывает текущую историю, поэтому кнопки браузера продолжают работать корректно.
  • Можно комбинировать с replace: true для редиректов на страницу ошибки без увеличения истории.

Применение с динамическими маршрутами

Navigo поддерживает маршруты с параметрами и query-параметрами, которые интегрируются с историей:

router.on('/user/:id', ({ data }) => {
    console.log(`Открыт профиль пользователя ${data.id}`);
});
router.navigate('/user/123');
  • URL изменяется на /user/123.
  • Объект data доступен в обработчике маршрута.
  • История браузера хранит полный URL, что позволяет корректно возвращаться к предыдущим страницам.

Взаимодействие с сервером

При History API важно, чтобы сервер был настроен на корректную отдачу SPA:

  • Все URL должны возвращать один и тот же HTML-файл, чтобы роутер на клиенте мог обработать маршрут.
  • При неправильной настройке сервера прямой переход по URL может вызвать 404.
  • Hash mode не требует специальной серверной конфигурации, так как URL до # остаётся постоянным.

Navigo обеспечивает полную интеграцию с историей браузера, позволяя строить полноценные SPA с сохранением привычного поведения навигации. Управление URL, состоянием страницы и динамическими маршрутами реализуется через простой и мощный API, основанный на стандартном History API браузера.

Оглавление