O Roteamento no React

O roteamento é essencial para criar aplicações React com várias páginas. O React Router é a biblioteca padrão para gerenciar a navegação no React.

Instalação do React Router

npm install react-router-dom

Configuração Básica

Configuração do roteador

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Navegação entre as páginas

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Accueil</Link>
      <Link to="/about">À propos</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Rotas Dinâmicas

Rotas com parâmetros

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="/products/:category/:id" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

// Dans le composant UserProfile
function UserProfile() {
  const { id } = useParams();
  
  return <div>Profil de l'utilisateur {id}</div>;
}