Rotas e Navegação SPA

Em uma SPA (Single Page Application), o navegador carrega um HTML e o JavaScript decide o que mostrar. Para parecer que o usuário "navega" entre páginas, usamos um roteador que mapeia URL → componente.

A biblioteca mais usada em React é o React Router:

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={<NaoEncontrada />} />
      </Routes>
    </BrowserRouter>
  );
}