Aula 07 – React Router: Navegação SPA 🗺️

Uma Single Page Application (SPA) não deve recarregar a página ao mudar de link. Hoje vamos aprender a usar o React Router para criar rotas e navegação fluida.

---

🧭 O que é o React Router?

É a biblioteca padrão para gerenciar a navegação em projetos React. Ela permite mapear URLs (ex: /contato) para componentes específicos.

Instalação:

$ npm install react-router-dom

---

🏗️ Estrutura Básica

Para ativar as rotas, envolvemos nossa aplicação no componente BrowserRouter.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/sobre">Sobre</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobre" element={<Sobre />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

---

🔗 Link vs

Atenção

Sempre use o componente <Link> do React Router em vez da tag <a>. - <a>: Recarrega a página inteira (mata o estado do React). - <Link>: Intercepta o clique e apenas troca o componente na tela.

---

parametros de Rota (Params)

Podemos criar rotas dinâmicas, como /perfil/ricardo.

<Route path="/perfil/:username" element={<Perfil />} />

// No componente Perfil
import { useParams } from 'react-router-dom';
const { username } = useParams();

---

🚀 Prática da Aula

Vamos criar um "Mini Portal de Notícias".

1. Crie as páginas: Home, Esportes, Tecnologia e Contato.
2. Crie uma barra de navegação que apareça em todas as páginas.
3. Implemente uma página de erro 404 para rotas não encontradas.
4. (Bônus) Use o useNavigate para redirecionar o usuário para a Home após preencher um formulário de contato.

---

📊 Como funciona a Navegação?

graph LR
    A[URL: /sobre] --> B{Router}
    B -- match --> C[Componente Sobre]
    B -- no match --> D[Componente 404]

Dica: NavLink

Use <NavLink> em vez de <Link> se quiser adicionar uma classe CSS automática (como .active) ao link da página onde o usuário está no momento.