El enrutamiento en React

El enrutamiento es esencial para crear aplicaciones React de varias páginas. React Router es la biblioteca estándar para gestionar la navegación en React.

Instalación de React Router

npm install react-router-dom

Configuración básica

Puesta en marcha del enrutador

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>
  );
}

Navegación entre 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>
  );
}

Rutas dinámicas

Rutas con 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>;
}