Навигация с заменой текущей записи

В Page.js управление историей браузера реализуется через методы page() и встроенные возможности HTML5 History API. Для замены текущей записи истории используется метод page.replace(), который позволяет изменить URL без добавления новой записи в стек истории. Это особенно полезно для динамических приложений, где необходимо обновлять адрес страницы без возможности возврата к предыдущему состоянию.

Синтаксис метода page.replace

page.replace(path, callback);
  • path — строка с маршрутом, который должен заменить текущий URL.
  • callback — функция, которая будет выполнена после замены URL, аналогичная обработчику маршрута в page().

Пример базового использования:

page('/home', () => {
  console.log('Пользователь находится на главной странице');
});

page('/profile', () => {
  console.log('Пользователь перешел в профиль');
  page.replace('/profile/edit'); // заменяет URL без добавления новой записи в историю
});

В этом примере при переходе на /profile URL изменится на /profile/edit, но кнопка «назад» в браузере вернёт пользователя не на /profile, а на предыдущую страницу перед /profile.

Отличие page.replace от обычного перехода

Метод page() добавляет новую запись в историю браузера:

page('/about');
  • При этом нажимая «назад», пользователь вернется на предыдущую страницу.
  • page.replace() изменяет URL текущей страницы без добавления новой записи, то есть предыдущая страница остаётся прежней.

Использование page.replace() особенно актуально для таких сценариев, как:

  • Обновление query-параметров без потери истории.
  • Перенаправления после авторизации или изменения состояния пользователя.
  • Изменение маршрута без перезагрузки компонента.

Пример замены текущей записи при авторизации

function handleLogin(user) {
  if (user.isAuthenticated) {
    page.replace('/dashboard'); // заменяем URL после успешного входа
  }
}

page('/login', () => {
  renderLoginForm();
});

После вызова page.replace('/dashboard') пользователь попадет на /dashboard, но кнопка «назад» не вернёт его на страницу логина, что улучшает UX.

Использование с query-параметрами

page.replace() позволяет безопасно менять параметры URL без создания лишних записей:

function filterProducts(category) {
  const newPath = `/products?category=${category}`;
  page.replace(newPath); // обновляет фильтр в адресной строке
}
  • Важно правильно формировать URL, чтобы не потерять остальные параметры.
  • Метод не инициирует повторный вызов обработчика, если текущий путь совпадает с новым URL.

Интеграция с middleware

Page.js поддерживает middleware для выполнения действий перед обработкой маршрута. page.replace() может использоваться внутри middleware:

page('*', (ctx, next) => {
  if (!ctx.path.startsWith('/public')) {
    console.log(`Посещение приватного маршрута: ${ctx.path}`);
  }
  next();
});

page('/private', () => {
  console.log('Пользователь в приватной зоне');
  page.replace('/private/home'); // обновление адреса без добавления в историю
});

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

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

  1. Использовать для редиректов и обновления состояния URL, где не требуется сохранение предыдущего адреса в истории.
  2. Не заменять URL без необходимости, чтобы избежать неожиданных эффектов для пользователя при нажатии «назад».
  3. Следить за синхронизацией состояния приложения и URL, особенно при работе с query-параметрами.

page.replace() является ключевым инструментом для современных SPA, где навигация должна оставаться динамичной, а история браузера — логичной и предсказуемой.

Оглавление