Как в SPA меняется URL в адресной строке без перезагрузки страницы? Что такое History API?

Что такое History API и зачем он нужен в SPA

В одностраничных приложениях (SPA) вся логика работает на одной HTML-странице. Чтобы пользователь мог перемещаться между разделами и при этом видеть изменение URL (например, /about, /products), используется History API. Он позволяет менять адресную строку без полной перезагрузки страницы, что делает навигацию быстрой и плавной.

Основные методы History API

• pushState(state, title, url) — добавляет новую запись в историю браузера и меняет URL. Первый аргумент — объект состояния, который можно передать при возврате на эту запись.
• replaceState(state, title, url) — заменяет текущую запись в истории, не создавая новую. Полезно для обновления URL без добавления лишних шагов.
• popstate event — срабатывает, когда пользователь нажимает кнопки "Назад" или "Вперед". В обработчике можно получить сохранённое состояние и обновить интерфейс.

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

// Переход на страницу /about без перезагрузки
history.pushState({ page: 'about' }, '', '/about');

// Обработка нажатия кнопки "Назад"
window.addEventListener('popstate', (event) => {
  if (event.state) {
    console.log('Вернулись на страницу:', event.state.page);
    // Обновляем интерфейс в соответствии с состоянием
  }
});

Где применяется

History API используется в современных фреймворках (React Router, Vue Router) для реализации клиентской маршрутизации. Он также полезен при создании интерактивных виджетов, где нужно сохранять состояние в URL (например, фильтры на странице товаров).

Вывод: History API — ключевой инструмент для построения SPA с удобной навигацией. Его стоит применять, когда требуется менять URL без перезагрузки страницы, сохраняя при этом возможность использовать кнопки браузера "Назад" и "Вперед".