React Router DOM

Introduction à React Router DOM

React Router DOM est une bibliothèque qui permet de créer des applications monopages (SPA - Single Page Applications) en fournissant un système de navigation basé sur les URLs. Contrairement à une application classique qui recharge entièrement la page lors d'un changement de route, React Router DOM met à jour uniquement les composants nécessaires.

Installation

Pour commencer, installe React Router DOM avec npm :

npm install react-router-dom

BrowserRouter

C'est le composant principal qui encapsule votre application et active le routage basé sur l'URL. Il est souvent placé au niveau supérieur de votre arborescence de composants.

Routes et Route

Les composants Routes et Route sont utilisés pour définir les différentes routes de l'application.

• Routes : Contient toutes les routes de l'application.
• Route : Définit une route spécifique avec une URL et un composant à afficher.

Bien penser ses routes.

L'exemple ci-dessous permet de naviguer entre 3 pages (3 composants). Pour simplifier j'ai créé 2 composants dans "App.tsx". Pensez plutôt à faire un composant par fichier.

Ci-dessous le code permet de se connecter, puis de revenir à la page d'accueil avec un message qui correspond à l'état de connection. On peut aussi aller sur la page "A propos".

Le lien dans le menu pour la connection/déconnection change de nom en fonction de l'état de connection.

Si vous avez bien compris le hook useContext vous aurez deviné qu'il faut déplacer <AuthProvider> dans main.tsx pour réussir cet exercice.

main.tsx

<AuthProvider>
    <App />
</AuthProvider>

App.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
//composant Home
const Home: React.FC = () => {
  //utlisation du hook personalisé pour 
  //récupérer les informations de connection
  const { utilisateurConnecte } = useAuth();
  return (
    {/*JSX généré en fonction de l'état de connection*/}
    <div>
      <h2>Page d'accueil</h2>
      {utilisateurConnecte ? (
        <div>
          <p>Bonjour {utilisateurConnecte.nom}, vous êtes connecté</p>
        </div>
      ) : (
        <div>
          <p>Merci de penser à vous connecter </p>
          <Link to="/connect">Se connecter</Link>
        </div>
      )}
    </div>
  );
};

// Composant About
const About: React.FC = () => {
  return <h1>À propos</h1>;
};


const App: React.FC = () => {
  const { utilisateurConnecte } = useAuth();
  
  return (
    <>      
        {/*Création d'un menu */}
        {/*La balise BrowserRouter doit englober le menu */}
        {/*Car il fournit le contexte de routage à tous les composants */}
        {/* path : Définit l'URL de la route. */}
        {/* element : Le composant à rendre lorsque l'URL correspond. */}
        <BrowserRouter>
          <nav>
            <ul>
              <li>
                <Link to="/">Accueil</Link>
              </li>
              <li>
                <Link to="/about">À propos</Link>
              </li>
              <li>
                
                {utilisateurConnecte ? (
                  <Link to="/connect">Se Déconnecter</Link>
                ) : (
                  <Link to="/connect">Se Connecter</Link>
                )}
                
              </li>
            </ul>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/connect" element={<UtilisateurConnecte />} />
          </Routes>
        </BrowserRouter>
  );
}

Utiliser useNavigate

Le hook useNavigate permet de naviguer par programmation. Par exemple voici un composant permettant de naviguer vers la racine du site.

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

const GoHomeButton: React.FC = () => {
  const navigate = useNavigate();

  const handleClick = (): void => {
    navigate("/");
  };

  return <button onClick={handleClick}>Retour à l'accueil</button>;
};

export default GoHomeButton;

Aller plus loin

Nous vous avons présenté le minimum vital permettant de naviguer entre différentes pages. Vous n'aurez pas besoin de plus pour faire le projet. Cependant, si vous voulez aller plus loin nous vous encourageons à lire la documentation Officielle.