Pular para conteúdo

Aula 15 - React Router 🚦

Criando Apps Multi-Página

Agenda 📅

  1. O que são SPAs?
  2. Multi-páginas (Simuladas)
  3. Componentes de Rota
  4. Navegação (Link e useNavigate)
  5. Parâmetros dinâmicos (:id)

1. O Mundo do SPA ⚛️

  • O site é uma única página HTML.
  • O Javascript "troca" a tela sem recarregar.
  • UX rápida e fluida.

2. React Router Dom ⚙️

npm install react-router-dom
  • A biblioteca padrão para web.
  • Permite que a URL combine com o que aparece na tela.

3. A Estrutura Básica 🏗️

  • BrowserRouter: O container principal.
  • Routes: O seletor de rotas.
  • Route: Define o caminho (path) e o componente (element).

4. Navegando sem Recarregar! 🏃‍♂️

  • Use <Link to="/contato">
  • NUNCA use <a href="..."> para rotas internas.

5. Navegação Programática 🚀

const navigate = useNavigate();

onClick={() => navigate("/dashboard")}
  • Ideal para redirecionar após ações (Login, Clique em Card).

6. Rotas Dinâmicas (URL Params) 🆔

  • path="/perfil/:username"
  • Hook useParams() captura o valor.
  • Uma única página que se adapta a mil perfis.

7. Página 404 (Not Found) 👻

  • path="*"
  • Garante que o usuário nunca caia em uma tela em branco.

Desafio de Roteamento ⚡

Se eu digitar www.meusite.com/asdfg e não tiver uma rota configurada para isso, o que o usuário vai ver se eu NÃO colocar uma rota com o path="*"?

Resumo ✅

  • Roteamento traz a sensação de um site real.
  • Hooks useNavigate e useParams são essenciais.
  • SPAs são o padrão da indústria moderna.

Próxima Aula: O Grande Final 🏆

Projeto Integrado: Backend + Frontend!

  • Conectando nossa API Node ao site React.
  • O Projeto Final do Curso!

Dúvidas? 🚦