🚀 Capítulo 13: Rotas - Hiperdrive

🎯 Objetivo da Aula

Ao final desta aula, você saberá como criar uma aplicação com múltiplas páginas (rotas) no React usando a biblioteca React Router, permitindo que o usuário navegue entre telas sem que a página inteira precise ser recarregada.

---

🏢 O Cenário Prático (Seu Desafio)

O painel da sua nave está ficando muito cheio! Você precisa dividir as informações: uma página para o Painel de Controle e outra para o Quartel General. Seu desafio é criar o sistema de Hiperdrive (Navegação) para alternar entre essas telas instantaneamente!

---

🧠 Fundamentos: A Teoria Traduzida

Por padrão, o React cria aplicações de “Página Única” (SPA). Para simular que estamos mudando de página, usamos uma biblioteca chamada react-router-dom.

Os principais componentes dela são:

1. BrowserRouter: Envolve toda a aplicação para permitir o uso de rotas.
2. Routes: Uma caixa que guarda todas as rotas possíveis.
3. Route: Define o caminho (URL) e qual componente deve aparecer.
4. Link: Substitui a tag <a> do HTML. Serve para mudar de página sem recarregar tudo.

---

📖 Exemplo Guiado: Configurando as Rotas

Vamos instalar a biblioteca e configurar as rotas.

🛠️ Passo a Passo (Instalação)

No terminal da pasta do seu projeto, pare o servidor e digite:

npm install react-router-dom

🛠️ Passo a Passo (Código)

Abra o arquivo src/App.jsx e configure as rotas:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 
// Componentes das páginas
function Painel() { return <h2>🎛️ Painel de Controle</h2>; }
function QG() { return <h2>🏰 Quartel General</h2>; }
 
function App() {
  return (
    <BrowserRouter>
      <div>
        <h1>🚀 Sistema de Hiperdrive</h1>
        
        {/* Menu de Navegação */}
        <nav>
          <Link to="/">Painel</Link> | <Link to="/qg">Quartel General</Link>
        </nav>
 
        <hr />
 
        {/* Onde as páginas vão aparecer */}
        <Routes>
          <Route path="/" element={<Painel />} />
          <Route path="/qg" element={<QG />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e execute npm run dev.
2. Clique nos links “Painel” e “Quartel General”. Veja que o texto embaixo muda na hora, e a aba do navegador não fica rodando aquela bolinha de carregamento!

---

🛠️ Prática Obrigatória 1

Crie um terceiro componente chamado Hangar (pode ser apenas uma função retornando um título). Adicione uma nova rota para /hangar que exiba esse componente.

---

🛠️ Prática Obrigatória 2

Adicione um link para o Hangar no menu de navegação usando o componente <Link>.

---

🔑 Gabarito de Código/Fórmulas

Prática 1 e 2:

No App.jsx:

function Hangar() { return <h2>🛸 Hangar de Naves</h2>; }
 
// No menu:
<Link to="/hangar">Hangar</Link>
 
// Nas Routes:
<Route path="/hangar" element={<Hangar />} />

---

← Capitulo Anterior | Proximo Capitulo →