Что такое HTML5 History API и как его использовать для управления навигацией без перезагрузки страницы?

Question

HTML5 History API позволяет изменять URL в браузере без перезагрузки страницы, сохраняя историю переходов. Основные методы API — pushState(), replaceState() и событие popstate. Они позволяют динамически менять состояние страницы, обновляя URL, что делает навигацию в одностраничных приложениях (SPA) более плавной и интерактивной.

YeaHub · Accepted Answer

HTML5 History API — это набор методов для управления историей навигации в браузере без перезагрузки страницы. В традиционных веб-приложениях каждый переход по ссылке ведет к загрузке новой страницы. С помощью History API можно динамически изменять содержимое и URL страницы без ее полной перезагрузки, что делает взаимодействие более плавным, особенно в одностраничных приложениях (SPA).Основные методы History API:history.pushState(state, title, url): Добавляет новый элемент в историю браузера с обновленным URL. Этот метод не перезагружает страницу, но позволяет изменять адресную строку.history.pushState({page: 1}, "Title", "/new-url");history.replaceState(state, title, url): Заменяет текущий элемент истории без добавления нового, что полезно, когда нужно изменить URL, но не сохранять новый шаг в истории.history.replaceState({page: 2}, "Title", "/another-url");window.onpopstate: Это событие срабатывает при переходе назад или вперед в истории. Его можно использовать для обновления содержимого страницы при таких переходах.window.onpopstate = function(event) {  
	console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
};History API активно используется в современных фреймворках, таких как React и Vue, чтобы управлять маршрутизацией в SPA. Это позволяет сделать навигацию более интерактивной и ускорить отклик приложения.