Como trocar URL sem carregar nova página em JavaScript

Neste artigo você vai aprender a como trocar URL sem carregar nova página em JavaScript, utilizando uma simples abordagem

Fala programador(a), beleza? Bora aprender mais sobre URL em JavaScript!

Muitas vezes, precisamos trocar a URL atual do navegador sem carregar uma nova página.

Isso pode ser útil em aplicações web que usam rotas dinâmicas e queriam trocar a URL sem recarregar a página.

Em JavaScript, podemos trocar a URL do navegador usando o objeto history e o método pushState.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

O método pushState adiciona uma nova entrada na pilha de histórico do navegador, permitindo que o usuário use o botão “Voltar” para retornar à página anterior.

Além disso, ele atualiza a URL atual do navegador sem recarregar a página.

Vamos ver um exemplo de como usar o método pushState para trocar a URL do navegador:

function updateUrl(newUrl) {
  history.pushState(null, null, newUrl);
}

No exemplo acima, criamos uma função chamada updateUrl que recebe uma nova URL como parâmetro.

Em seguida, chamamos o método pushState passando null como o estado e o título e a nova URL como os parâmetros.

Para usar a função updateUrl, basta chamá-la passando a nova URL como parâmetro. Por exemplo:

updateUrl('https://www.example.com/page2');

Isso vai atualizar a URL atual do navegador para https://www.example.com/page2 sem recarregar a página.

Usando o objeto window.location

Outra maneira de trocar a URL do navegador sem recarregar a página é usando o objeto window.location.

O objeto window.location contém informações sobre a URL atual do navegador e permite alterá-la usando as propriedades href, protocol, host, hostname, pathname, search e hash.

Vamos ver um exemplo de como usar o objeto window.location para trocar a URL do navegador:

function updateUrl(newUrl) {
  window.location.href = newUrl;
}

No exemplo acima, criamos uma função chamada updateUrl que recebe uma nova URL como parâmetro. Em seguida, atribuímos a nova URL à propriedade href do objeto window.location.

Para usar a função updateUrl, basta chamá-la passando a nova URL como parâmetro. Por exemplo:

updateUrl('https://www.example.com/page2');

Isso vai atualizar a URL atual do navegador para https://www.example.com/page2 sem recarregar a página.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em resumo, existem várias maneiras de trocar a URL do navegador sem recarregar a página em JavaScript.

O método pushState e o objeto window.location são úteis para trocar a URL e permitir que o usuário volte para a página anterior usando o botão “Voltar”.

Já o método replace é útil para trocar a URL e remover a entrada atual da pilha de histórico do navegador.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!