Especialização Frontend com React & TypeScript • React 19, Hooks, Estado Global e Next.js

🗺️ Mapa Conceitual do Tópico

flowchart LR
    BROWSER["URL /dashboard/pedidos"] --> ROUTER["React Router Data Engine"]
    ROUTER --> ROOT["RootLayout"]
    ROOT --> OUTLET["<Outlet /> Renderiza a Rota Ativa: PedidosPage"]

🏛️ 1. O Paradigma de Roteamento no Cliente (Client-Side Routing)

Em uma Single-Page Application (SPA), a navegação entre telas não recarrega o documento HTML do servidor. O React Router intercepta as alterações na URL através da History API do navegador e substitui dinamicamente os componentes correspondentes.

🗂️ 2. Layouts Aninhados e o Componente <Outlet />

Com o conceito de Nested Routes, a hierarquia da URL reflete a hierarquia de componentes. O componente <Outlet /> atua como um espaço reservado (placeholder) onde as rotas filhas são renderizadas sem recriar os layouts comuns (como menus e headers).

🛡️ 3. Route Guards e Proteção de Acesso

Rotas protegidas autenticam o usuário antes de renderizar a página solicitada. Caso o usuário não possua privilégios, ele é redirecionado defensivamente via <Navigate to="/login" replace />.

⚠️ 4. Armadilhas Comuns e Anti-Padrões de Produção

  1. Uso de Links Tradicionais <a>: Usar <a href="/sobre"> força o navegador a fazer uma requisição HTTP completa e recarregar toda a aplicação JS, perdendo todo o estado em memória. Use sempre <Link to="/sobre"> ou <NavLink>.
  2. Redirecionamento sem a Propriedade replace: Redirecionar em rotas de autenticação sem replace polui o histórico de navegação, fazendo o botão “Voltar” do navegador entrar em um loop infinito.

💡 5. Diretrizes de Engenharia (Meta & React Docs)

  • Adote a Nova Data API (createBrowserRouter): Permite o uso de loaders de dados prévios e actions de formulário integradas diretamente na definição da rota.
  • Organize Rotas em Módulos de Feature: Isole rotas administrativas em módulos separados para viabilizar Code Splitting e Lazy Loading com React.lazy().

💻 6. Demonstração Arquitetural do Conceito

// ProtectedLayout.tsx - Proteção de rotas corporativas
import React from "react";
import { Navigate, Outlet } from "react-router-dom";

export function ProtectedShell({ isAuth }: { isAuth: boolean }) {
  if (!isAuth) {
    return <Navigate to="/auth/login" replace />;
  }
  return (
    <div className="shell-container">
      <aside className="sidebar">Menu</aside>
      <main className="content"><Outlet /></main>
    </div>
  );
}

📋 7. Cheat-Sheet do React Router 6+

Hook / Componente Função Primária
<Link to="..."> Navegação declarativa sem recarregar a página.
<Outlet /> Renderiza a rota filha ativa dentro de um layout pai.
useNavigate() Navegação imperativa via código (ex: após login bem-sucedido).
useParams() Captura parâmetros dinâmicos da URL (ex: /users/:id).
useSearchParams() Lê e modifica query strings (?page=2&filter=active).

🔍 8. Diagnóstico de Performance & React DevTools Profiler

Ao otimizar rotas SPA:

  • Análise de Chunks (Code Splitting): Verifique na aba Network se a navegação para /dashboard carrega um arquivo .js separado sob demanda através de React.lazy().
  • Suspense Fallbacks: Meça o tempo em que o esqueleto de carregamento (Skeleton Screen) fica visível antes da resolução do loader da rota.

🧪 9. Casos de Teste e Cenários de Borda Recomendados

  • 🔍 Rotas 404: Garanta que URLs inexistentes renderizem uma página de Not Found amigável e acessível.
  • 🔍 Parâmetros Inválidos: Teste o comportamento de rotas /users/:id quando o ID fornecido não for numérico ou UUID.
  • 🔍 Redirecionamento com Preservação de Rota: Após o login, certifique-se de que o usuário seja redirecionado para a página que tentava acessar originalmente.