Aula 07 🗺️
React Router: Navegação SPA
O que vamos aprender hoje? 📚
- O que é uma SPA? (Revisão)
- Introdução ao React Router
- Rotas Dinâmicas (Params)
- Navegação Programática
1. Por que Router? 🤔
Fim do Reload 🔄
- Navegação tradicional: Recarrega TUDO.
- Navegação SPA: Troca apenas o componente.
- Usuário nem percebe que mudou de URL!
2. React Router DOM 🏗️
Componentes Chave 🔑
- BrowserRouter: Liga o roteamento.
- Routes: O "cérebro" que decide qual rota mostrar.
- Route: A regra de mapeamento (Caminho -> Componente).
Link vs Anchor () 🔗
<a>= Mata o Estado (Recarrega).<Link>= Mantém o Estado (Mágico).- Use sempre
<Link>ou<NavLink>!
3. Rotas Dinâmicas 🛸
URL com Parâmetros 🆔
- Exemplo:
/produto/:id - Útil para perfis, posts, produtos.
- Acessamos via hook
useParams().
4. Navegação via Código 🖱️
useNavigate 🚀
- Redirecionar após um login.
- Voltar para a página anterior.
- Simples:
const navigate = useNavigate();
🚀 Desafio da Aula
- Criar um portfólio com 3 páginas.
- Usar rotas dinâmicas para mostrar detalhes de projetos.
- Implementar uma página de erro 404 personalizada.