English 中文 العربية 日本語 Português

useNavigate useNavigate: Navegação Imperativa

Última atualização: 2026-11-03

useNavigate useNavigate: Navegação Imperativa

O useNavigate retorna uma função navigate: ir para a página inicial após entrar, voltar para a lista após um envio, expulsar usuários anônimos para a página de login — todos esses saltos comandados pelo código a usam. navigate(to) avança, navigate(-1) volta, e você pode passar replace e state junto. É a contraparte imperativa do Link e a ferramenta de escolha sempre que o código, e não o usuário, decide para onde ir em seguida.

GrupoRoteamento e Gerenciamento
TipoHook
DesdeReact Router 6.4

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { useNavigate } from 'react-router-dom'

function LoginButton() {
  const navigate = useNavigate()
  return (
    <button onClick={() => {
      // Navigate after a successful login; replace leaves no history entry
      navigate('/dashboard', { replace: true })
    }}>Sign in</button>
  )
}
// navigate(-1) is the browser back button
// navigate('/detail', { state: { from: 'home' } }) carries hidden state

⚙️ Parâmetros

toO destino: uma string de caminho ('/home'), um número (-1 para voltar) ou um objeto da forma { pathname, search }.
optionsO segundo argumento: { replace: true } substitui a entrada do histórico, { state } carrega dados que não aparecem na barra de endereços.

Retorna：Retorna a função navigate(to, options?): chamá-la dispara o salto; ela não renderiza UI e apenas muda a rota.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar em "Ir para login" anexa login à pilha do histórico; "voltar para casa com replace" sobrescreve a entrada do topo sem deixar rastro; "Voltar" desempilha e retorna à página anterior — os comportamentos push, replace e back do navigate (demonstração simulada).
▶ Experimente

💡 Pontos-chave

💡 Dica Após entrar, prefira navigate('/home', { replace: true }): assim, apertar voltar não devolve o usuário à página de login.
ℹ️ Informação A v6 removeu useHistory em favor de useNavigate, que também lida com saltos numéricos como navigate(-2).
⚠️ Aviso Não chame navigate durante a renderização; coloque-o em um callback de evento ou em um Effect; caso contrário, o React reporta "Cannot update during render".
browserrouter useparams route-guard
Mais casos em breve.

📚 Tutoriais Relacionados

React Router Avançado
Lição 17: navegação programática, replace e passagem de state.

❓ Perguntas Frequentes

P Quando uso navigate e quando uso Link?
R Use Link quando o usuário clica em um link; use navigate quando o código decide saltar (um envio bem-sucedido, uma verificação de permissão, uma contagem regressiva que acabou de terminar).
P O que faz replace: true?
R Ele substitui a entrada atual do histórico pela nova, então voltar pula essa página — útil para páginas intermediárias de login e pagamento, onde uma navegação de volta poderia disparar uma ação duplicada.
P Como passo dados junto com a navegação?
R Chame navigate('/detail', { state: { from: 'home' } }) e leia-o na página de destino com useLocation().state. Ele nunca aparece na barra de endereços e sobrevive a um refresh dentro de history.state.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%