Atualizar barra de endereço com nova URL sem recarregar página

Neste artigo você vai aprender a atualizar barra de endereço com nova URL, sem recarregar e utilizando JavaScript

Fala programador(a), beleza? Bora aprender mais sobre manipulação de URL e também JavaScript!

Vamos precisar aprender alguns recursos, que não são tão novos em JS para atingir nosso objetivo

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Primeiramente vamos acessar o objeto global window, que está presente em toda as aplicações de JavaScript

Em window temos acesso a history, que possui método que trabalham com a URL

E o que utilizaremos será o pushState

O método pushState precisa de alguns argumentos:

• state: texto ou objeto que está associado a nova URL estaremos adicionando;
• title: um título para a nova página;
• url: a nova URL que troca a atual, por exemplo, /produtos;

Com estes preenchidos o método vai fazer exatamente o que precisamos, mudar a URL atual para um nova, definida como parâmetro

Veja na prática a utilização de pushState:

window.history.pushState("Algum texto para o state", "Produtos", "/produtos");

Agora teremos uma mudança de URL para /produtos

Onde o title será Produtos, e o state será o que definirmos como primeiro argumento

Note que o title em alguns navegadores ainda é ignorado, então pode ser que ele não seja alterado como esperamos

Conclusão

Neste artigo você aprendeu a como atualizar barra de endereço com nova URL com JavaScript

Utilizamos a função pushState, onde podemos passar uma nova URL

Que é alterada baseada no argumento que enviamos para a função, podemos também passar outros parâmetros como: state e title

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!