Como redirecionar para uma URL com JavaScript

Neste artigo você vai aprender a como redirecionar para uma URL com JavaScript, ou seja, mudar a URL através de um script

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

Para mudar de URL com JS vamos utilizar o objeto window

Ele tem uma propriedade chamada href que pode alterar a URL que o usuário está

O código é:

window.location.href = '/page';

Desta maneira mudamos o usuário para uma página do nosso site, alteramos o path para a mesma URL

Só que mudamos a página que o usuário está acessando

Para voltar uma página você pode utilizar:

window.location.href = '../';

E se você precisa redirecionar para outra página utilize:

window.location.href = "https://www.google.com";

Assim teremos o redirecionamento completo, o usuário irá para um outro domínio, simples não é?

Conclusão

Neste artigo você aprendeu a como redirecionar para uma URL com JavaScript

Utilizamos o objeto window, que é presente em qualquer aplicação com JavaScript

Nele temos acesso a propriedade href, que pode mudar a URL que o usuário está acessando

Tanto para uma página do nosso site, como também externa

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!

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

Qual a diferença entre href, assign e replace?

O href não é o único caminho, o objeto location tem dois métodos que fazem quase a mesma coisa

O primeiro é o assign:

window.location.assign('/page');

Ele se comporta igualzinho ao href: leva o usuário pra nova URL e GUARDA a página anterior no histórico

Ou seja, o botão de voltar do navegador funciona normal

O segundo é o replace:

window.location.replace('/page');

A diferença é que o replace TROCA a entrada atual do histórico, ele não empilha uma nova

Na prática: o usuário aperta voltar e não volta pra página que redirecionou, ele pula direto pra anterior

E por que isso importa? 🙂

Pensa numa tela de login que redireciona depois de autenticar

Se você usa href, o cara aperta voltar e cai de novo na tela de login já logado, aí fica aquele efeito de ping pong

Com replace isso não acontece

Regra de bolso que uso pra decidir: se faz sentido o usuário voltar pra página que redirecionou, usa href ou assign, se não faz, usa replace

Como redirecionar depois de alguns segundos?

Caso clássico: aquela página de "pedido confirmado" que espera um pouquinho e manda o usuário pro início

Aí você junta o redirecionamento com o setTimeout:

setTimeout(() => {
window.location.href = '/';
}, 3000);

O segundo argumento é o tempo em MILISSEGUNDOS, então 3000 são três segundos

Tome cuidado com um detalhe: se o usuário sair da página antes do tempo acabar, o redirecionamento simplesmente não acontece, e tá tudo certo, é o esperado

E se você quiser cancelar o redirecionamento (o cara clicou em algum botão no meio do caminho, por exemplo), guarda o retorno e limpa:

const timer = setTimeout(() => {
window.location.href = '/';
}, 3000);

clearTimeout(timer);

Dica de UX: mostra um contador ou pelo menos um texto avisando que vai redirecionar

Redirecionamento silencioso deixa o usuário sem entender o que aconteceu com a tela dele

Como abrir a URL em uma nova aba?

Aqui a pegadinha: isso NÃO é redirecionamento

Quando você usa o window.location, o usuário sai da página atual

Se a ideia é manter ele onde está e só abrir outro endereço do lado, quem faz o trabalho é o window.open:

window.open('https://www.google.com', '_blank');

O _blank é o que pede a nova aba

Um ponto que pega muita gente: navegador costuma bloquear abertura de aba que não veio de uma ação do usuário

Então coloca esse código dentro do clique de um botão ou link, nunca solto no carregamento da página, senão o bloqueador de pop-up engole e você fica achando que o código tá quebrado

Já me ferrei uma vez por causa disso haha

Como redirecionar passando parâmetros na URL?

Muita vez você não quer só mandar o usuário pra outra página, quer levar informação junto

Dá pra montar a query string na mão:

window.location.href = '/busca?termo=javascript&pagina=2';

Funciona, mas tem um risco: se o valor vier de um input, qualquer espaço ou acento quebra a URL

Pra isso existe o URLSearchParams, que escapa os valores pra você:

const params = new URLSearchParams({
termo: 'redirecionar url',
pagina: 2,
});

window.location.href = `/busca?${params.toString()}`;

E do outro lado, na página que recebeu, você lê assim:

const params = new URLSearchParams(window.location.search);
const termo = params.get('termo');

Se liga que o window.location.search te devolve só o pedaço da URL a partir do ?

Regra de segurança que vale ouro: nunca jogue senha ou token na query string, isso fica gravado no histórico do navegador

Cuidados que mudaram desde que esse código virou padrão:

O window.location continua o mesmo de sempre, o que mudou foi ONDE o nosso JavaScript roda hoje

Se liga em três armadilhas que aparecem em projeto moderno:

window não existe fora do navegador:

Em código que roda no servidor, o objeto window simplesmente não está lá

Aí você toma aquele erro clássico de window is not defined

A saída é garantir que o redirecionamento aconteça só depois que a página chegou no navegador, dentro de um evento ou de um efeito de ciclo de vida do componente

Em aplicação de página única, isso RECARREGA tudo:

Quando o projeto tem um sistema de rotas próprio, trocar a URL direto pelo window.location faz o navegador baixar a página inteira de novo

O estado que estava na memória morre junto

Pra navegar dentro do próprio app, use o mecanismo de navegação do seu roteador, e deixe o window.location pra sair do domínio ou pra forçar um recarregamento mesmo

Redirecionar com JS não é a mesma coisa que redirecionar no servidor:

O redirecionamento por script só acontece depois que a página carregou e o código executou

Se o objetivo é mudar o endereço de uma página de forma definitiva, isso é trabalho do servidor, não do JavaScript

Usar script pra esse tipo de mudança permanente é remendo, e remendo cobra o preço lá na frente…

Perguntas frequentes sobre redirecionar URL com JavaScript:

Qual a forma mais simples de redirecionar?

Atribuir o endereço ao window.location.href

É uma linha e resolve tanto pra página do próprio site quanto pra domínio externo

Como impedir que o usuário volte pra página anterior?

Use o window.location.replace, ele troca a entrada atual do histórico em vez de empilhar uma nova

Como recarregar a página atual sem mudar de URL?

window.location.reload();

Ele recarrega o endereço que o usuário já está

Por que aparece "window is not defined"?

Porque o código está rodando em um ambiente que não é o navegador

Garanta que a linha do redirecionamento só execute do lado do cliente

Dá pra redirecionar sem JavaScript?

Dá, e na maioria dos casos é até melhor: link comum resolve a navegação e o servidor resolve mudança definitiva de endereço

O JavaScript entra quando o redirecionamento depende de uma condição que só o navegador conhece, tipo o resultado de um formulário ou de um clique