📊 Capítulo 09: React Router & Data APIs
Especialização em Frontend com React
🗺️ O Fluxo de Dados com Data Routers (createBrowserRouter)
flowchart TD
URL["Usuário clica em link /pedidos/123"]
--> ROUTER["createBrowserRouter([...])"]
--> LOADER["loader: async ({ params }) => buscarPedido(params.id)\n(Dispara busca de dados EM PARALELO ao download do componente JS!)"]
LOADER --> VIEW["Componente renderiza instantaneamente via useLoaderData()! (Zero spinners em cascata!) ⚡"]
VIEW --> MUTATION["Formulário submete via <Form method='post'>"]
MUTATION --> ACTION["action: async ({ request }) => atualizarPedido(request)"]
ACTION --> REVALIDATE["Revalidação Automática de todos os loaders da tela!"]
style URL fill:#ede7f6,stroke:#512da8,stroke-width:2px
style ROUTER fill:#fff3e0,stroke:#ff9800,stroke-width:2px
style LOADER fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
style VIEW fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
style MUTATION fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
style ACTION fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
style REVALIDATE fill:#b2dfdb,stroke:#00796b,stroke-width:2px
🎯 Slide 1: A Revolução das Data APIs (Loaders & Actions)
-
No React Router Antigo: A tela renderizava um spinner, chamava
useEffect, baixava a API e causava saltos visuais (layout shift). - No React Router Moderno: Os dados são buscados em paralelo à rota com
loader, eliminando cachoeiras de requisições (waterfalls)!
🎯 Slide 2: Layouts Aninhados com <Outlet />
export function DashboardLayout() {
return (
<div className="layout-grid">
<Sidebar />
<main>
<Outlet /> {/* As sub-rotas renderizam aqui dentro! */}
</main>
</div>
);
}
🎯 Slide 3: Tratamento Centralizado de Erros com errorElement
- Se um loader lançar erro HTTP 404 ou 500, o React Router isola a falha apenas na rota filha sem quebrar a barra de navegação superior!
🔗 Navegação do Capítulo 09
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim