Como modificar a url e manipular o histórico de navegação sem recarregar a página com javascript

Como modificar a url e manipular o histórico de navegação sem recarregar a página com javascript

Podemos fazer mudanças no histórico de navegação de um site assim como atualizar a url apenas com eventos javascript, sem a necessidade de recarregar a página toda (reload). Neste artigo vou ensinar como manipular o histórico de navegação e detectar essas mudanças utilizando apenas javascript.

Essa metodologia, de navegação em um site sem efetuar um novo recarregamento completo da página, é chamada de Stateful. Muitas bibliotecas para desenvolvimento de interface utilizam Stateful Components, como ReactJS, AngularJS, VueJS, etc.

Como mudar a URL e criar um novo estado de navegação com javascript

No código abaixo vamos utilizar o history.pushState para adicionar um novo estado na navegação. Quando criamos um novo estado o navegador entende como se fosse uma nova página, sendo que se o usuário clicar no botão voltar do navegador voltará para o estado anterior.

history.pushState({page: 2}, "Título da Página 2", "?page=2");

Como primeiro parâmetro podemos passar um objeto javascript, no qual podemos capturá-lo com um listener (explicarei isso nos próximos exemplos). O segundo parâmetro é o título que esse novo estado irá receber e o terceiro é o que será mudado na URL.

Como mudar a URL sem criar um novo estado, apenas alterando o estado atual

Se não queremos adicionar um novo estado no histórico de navegação, podemos simplesmente substituir o pushState pelo replaceState:

history.replaceState({page: 3}, "Título da Página 3", "?page=3");

Como criar um listener para verificar quando um estado é alterado

Por meio do window.onpopstate podemos verificar quando o estado é alterado, resgatando através do event.state o objeto javascript que foi passado como primeiro parâmetro nos exemplos anteriores.

window.onpopstate = function(event) {
	(`location: ${document.location}, state: ${JSON.stringify(event.state)}`);
}

Referências