Le Routage en React

Le routage est essentiel pour créer des applications React multi-pages. React Router est la bibliothèque standard pour gérer la navigation dans React.

Installation de React Router

npm install react-router-dom

Configuration de Base

Mise en place du routeur

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

Navigation entre les pages

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

Routes Dynamiques

Routes avec paramètres

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

Routes imbriquées

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route index element={<DashboardHome />} />
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// Dans le composant Dashboard
function Dashboard() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Accueil</Link>
        <Link to="/dashboard/profile">Profil</Link>
        <Link to="/dashboard/settings">Paramètres</Link>
      </nav>
      <Outlet /> {/* Affiche les routes enfants */}
    </div>
  );
}

Navigation Programmatique

Redirection

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

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();
    // Logique de connexion
    if (loginSuccessful) {
      navigate('/dashboard');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Champs du formulaire */}
    </form>
  );
}

Navigation avec état

function ProductList() {
  const navigate = useNavigate();

  const handleProductClick = (product) => {
    navigate(`/products/${product.id}`, {
      state: { product }
    });
  };

  return (
    <div>
      {products.map(product => (
        <div key={product.id} onClick={() => handleProductClick(product)}>
          {product.name}
        </div>
      ))}
    </div>
  );
}

Protection des Routes

Routes privées

function PrivateRoute({ children }) {
  const isAuthenticated = useAuth(); // Hook personnalisé
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

Gestion des Erreurs 404

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

function NotFound() {
  return (
    <div>
      <h1>404 - Page non trouvée</h1>
      <p>La page que vous recherchez n'existe pas.</p>
      <Link to="/">Retour à l'accueil</Link>
    </div>
  );
}

Bonnes Pratiques

1. Organisation des routes :

   • Regroupez les routes par fonctionnalité
   • Utilisez des routes imbriquées pour les sections complexes
   • Maintenez une structure de routes claire et logique

2. Performance :

   • Utilisez le chargement paresseux (lazy loading) pour les routes
   • Optimisez les transitions entre les pages

3. UX :

   • Ajoutez des indicateurs de chargement
   • Gérez les erreurs de manière élégante
   • Maintenez l’état de navigation

Exercices pratiques

1. Créez une application de blog avec :

   • Une page d’accueil listant les articles
   • Des pages d’articles individuels
   • Une page de catégorie
   • Une page de recherche

2. Créez un tableau de bord avec :

   • Une authentification
   • Des routes protégées
   • Une navigation imbriquée
   • Des transitions fluides

3. Créez une boutique en ligne avec :

   • Un catalogue de produits
   • Des pages de catégories
   • Un panier persistant
   • Un processus de paiement

Conclusion

Le routage est un aspect crucial des applications React modernes. Dans le prochain chapitre, nous allons explorer la gestion d’état en React, qui permet de gérer les données de manière efficace dans toute l’application.