React Router : Introduction

React Router : Qu'est-ce que c'est et comment l'utiliser

React Router est une bibliothèque essentielle dans l'écosystème React. Elle permet de gérer la navigation et le routage dans une application React, notamment les Single Page Applications (SPA). En utilisant React Router, vous pouvez créer des expériences utilisateur dynamiques, où le contenu change sans recharger complètement la page.

1. Qu'est-ce que React Router ?

React Router est une bibliothèque qui facilite la gestion des routes dans une application React. Une route est une URL spécifique qui affiche un composant particulier, permettant de structurer votre application avec plusieurs pages ou vues. Contrairement aux sites web traditionnels, les applications React fonctionnent généralement sans rechargement de la page, rendant le routage côté client essentiel.

2. Comment fonctionne React Router ?

React Router fonctionne en mappant les routes (URL) vers des composants. Lorsqu’un utilisateur visite une URL spécifique, React Router affiche le composant correspondant sans recharger la page.

Les deux composants principaux de React Router sont :

<BrowserRouter> : Enveloppe toute votre application et permet la gestion des routes via l'API du navigateur.
<Route> : Définit un chemin (route) spécifique et le composant à afficher pour cette route.

3. À quoi sert React Router ?

React Router sert principalement à :

Créer une navigation fluide entre plusieurs pages dans une application React, sans actualisation de la page.
Gérer les liens profonds (deeplinks), permettant aux utilisateurs d'accéder directement à une section ou page spécifique de l'application via l'URL.
Modulariser votre application en divisant les différentes vues ou pages en composants réutilisables.

4. Exemple pratique : Naviguer entre différentes pages du site

Voici un exemple simple pour illustrer comment React Router fonctionne.

Étape 1 : Installer React Router

Si vous ne l'avez pas déjà installé, vous pouvez ajouter React Router à votre projet avec la commande suivante :

npm install react-router-dom

Créez plusieurs composants pour les pages de votre site, puis configurez la navigation en utilisant BrowserRouter, Route et Link.

// App.js
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Accueil</Link>
          </li>
          <li>
            <Link to="/about">À propos</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

Dans cet exemple :

BrowserRouter (alias Router) encapsule l'application, gérant les changements d'URL.
Link crée des liens internes vers les différentes pages sans recharger la page.
Routes et Route définissent quelles routes correspondent à quels composants.

Étape 3 : Créer les composants pour chaque page

Voici un exemple simple pour trois pages : Accueil, À propos et Contact.

// Home.js
export default function Home() {
  return <h1>Bienvenue sur la page d'accueil !</h1>;
}

// About.js
export default function About() {
  return <h1>À propos de nous</h1>;
}

// Contact.js
export default function Contact() {
  return <h1>Contactez-nous</h1>;
}

Étape 4 : Naviguer entre les pages

Lorsque vous cliquez sur un lien dans la navigation, React Router affiche dynamiquement le composant associé à la route correspondante, sans recharger toute la page. Par exemple :

Cliquer sur "À propos" charge le composant About. Cliquer sur "Contact" charge le composant Contact.

5. Bonus : Utilisation de la redirection

Vous pouvez également rediriger les utilisateurs automatiquement vers une page particulière à l'aide de la fonction useNavigate. Voici un exemple de redirection après une action réussie :

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

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

  function handleSubmit() {
    // Simuler une action
    setTimeout(() => {
      navigate("/thank-you"); // Rediriger vers une page de remerciement
    }, 1000);
  }

  return (
    <div>
      <h1>Contactez-nous</h1>
      <button onClick={handleSubmit}>Envoyer</button>
    </div>
  );
}

export default Contact;

Conclusion

React Router est un outil puissant qui permet de créer des interfaces utilisateur dynamiques et navigables dans une application React. En permettant le changement de pages sans recharger la page entière, il améliore considérablement l'expérience utilisateur. Avec l'exemple ci-dessus, vous avez un bon point de départ pour ajouter du routage à vos propres applications.

Dans les prochains articles, nous verrons comment utiliser certaines fonctionnalités avancées de React Router, comme les routes imbriquées, la protection des routes et les paramètres d'URL.