ProtectedRoute Guardiões de Rota

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

ProtectedRoute Guardiões de Rota

Um guardião de rota verifica permissões antes que a página abra: envolva uma rota em ProtectedRoute, e quando o visitante não está logado ele redireciona para /login enquanto lembra a página de origem, para que possa ser enviado de volta após entrar. O React não traz um guardião nativo, então você o constrói a partir de renderização condicional mais Navigate ou useNavigate, e o guardião permanece um componente simples que você pode testar isoladamente.

ℹ️ 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 { Navigate, Outlet } from 'react-router-dom'

function ProtectedRoute({ isAuth }) {
  if (!isAuth) {
    // Not signed in: redirect to the login page and remember where we came from
    return <Navigate to="/login" replace state={{ from: location.pathname }} />
  }
  return <Outlet />   // Signed in: render the child routes
}

// Usage:
// <Route element={<ProtectedRoute isAuth={user} />}>
//   <Route path="/admin" element={<Admin />} />
// </Route>

⚙️ Parâmetros

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

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

Saída：

Clicar em "Admin" enquanto deslogado é bloqueado e cai na página de login; clicar em "Entrar e voltar" entra no painel administrativo — o fluxo de guardião de um redirecionamento Navigate mais o retorno após entrar (demonstração simulada).

💡 Pontos-chave

🏷️ Mais Roteamento e Estado

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

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.

Sobre Nós