Un guide d’utilisation de React-Router-dom

Pour toute application React d’une certaine complexité, il est indispensable de la structurer en plusieurs pages. Cela requiert la mise en place d’un système de navigation réactive, communément appelé routage.

Bien que ce sujet puisse paraître ardu au premier abord, ce guide vous permettra d’appréhender les fondements essentiels. Dans le cadre de ce tutoriel, nous allons bâtir une application qui met en œuvre le routage.

Le routage React : Qu’est-ce que c’est ? (Routage côté client)

Le routage React se présente comme une forme de navigation côté client, mise en œuvre au sein des applications React. Il s’oppose au routage côté serveur. Dans le routage côté serveur, chaque accès à une nouvelle page génère une requête GET du navigateur vers le serveur. Cette requête peut engendrer un temps d’attente non négligeable avant de recevoir une réponse.

Dans le contexte d’une application web où la navigation entre les pages est fréquente, ce délai peut nuire à l’expérience utilisateur. Le routage côté client offre une solution alternative. Au lieu de demander du HTML au serveur, l’application génère le HTML des différentes pages via du code JavaScript.

L’application requiert un unique fichier `index.html` comme point d’entrée. Ce fichier charge le code JavaScript. Le bundle JavaScript se chargera ensuite de la manipulation du DOM pour afficher les pages, gérer la navigation et implémenter les fonctionnalités de l’application.

Étant donné que le serveur ne fait que restituer le fichier `index.html`, l’application est qualifiée d’application monopage.

Avantages du routage côté client

• Il procure une expérience utilisateur améliorée, grâce à une navigation plus rapide et une application plus réactive. Avec le routage côté serveur, chaque navigation induit une requête réseau avec une certaine latence.
• Il rend possible la création d’applications fonctionnant hors ligne, le code étant mis en cache localement. Cela permet d’améliorer la disponibilité des applications et d’offrir des fonctionnalités hors ligne.
• L’application consomme moins de données, car les requêtes réseau sont considérablement réduites si tout est envoyé en une seule fois et si certains fichiers sont mis en cache localement.
• La charge du serveur s’en trouve allégée, car il ne doit restituer l’application qu’une seule fois, contrairement au rendu côté serveur.

Passons maintenant à la mise en œuvre du routage React.

Comment mettre en œuvre le routage React

Pour ce tutoriel, nous allons concevoir une application simple de prise de notes. Elle sera composée de plusieurs pages. Nous allons utiliser le routage côté client à l’aide de React Router DOM pour permettre la navigation entre les différentes pages. Nous n’allons pas mettre en œuvre toutes les fonctionnalités de l’application. Nous allons nous concentrer uniquement sur le routage.

Prérequis

Pour suivre ce tutoriel, une compréhension de HTML, JavaScript et React est requise. Vous devez également avoir Node.js et NPM installés. Vous pouvez les télécharger et les installer simultanément en téléchargeant Node.js depuis le site officiel. Vous pouvez aussi suivre le guide dans la vidéo YouTube intégrée.

Ce que nous allons créer

L’application sera constituée de plusieurs pages. L’utilisation du routage React permettra de naviguer entre ces pages. Les maquettes des pages sont présentées ci-dessous.

La page d’accueil sera affichée à l’adresse ‘/’.

La page « À propos » sera affichée à l’adresse ‘/about’.

La page « Notes » sera affichée à l’adresse ‘/notes’.

La page de création de notes sera affichée à l’adresse ‘/notes/new’.

Chaque note pourra être consultée individuellement sur sa propre page, accessible via l’adresse ‘/routes/‘, où représente l’identifiant numérique de la note.

Mise en route

Pour commencer, créons un nouveau projet React. J’utiliserai Vite, la commande d’initialisation est donc la suivante :

npm create vite@latest scribbble --template react

J’ai nommé mon projet « scribbble » et j’ai choisi React comme modèle. Ensuite, j’ouvrirai VS Code via les commandes suivantes :

cd scribbble
code .

Une fois VS Code lancé, retournez au terminal et installez le package `react-router-dom`. Ce package simplifie la mise en place du routage React dans vos applications.

npm install react-router-dom

Nous allons ensuite créer un fichier pour stocker nos notes. Créez le fichier `src/notes.js` et ajoutez le code ci-dessous :

const notes = [
  {
    id: 1,
    title: "Note 1",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 2,
    title: "Note 2",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 3,
    title: "Note 3",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
];

export default notes;

Ensuite, supprimez le fichier `src/App.css`. Nous n’allons pas l’utiliser dans ce projet. N’oubliez pas de retirer également l’importation du fichier `App.css` du fichier `App.jsx`.

Enfin, remplacez tout le contenu du fichier `index.css` par ce code :

:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}

Ensuite, créons les fichiers suivants pour les différentes pages de notre application :

• `src/pages/Home.jsx`
• `src/pages/About.jsx`
• `src/pages/Note.jsx`
• `src/pages/NewNote.jsx`
• `src/pages/Notes.jsx`

Puis, créons le fichier pour notre composant de barre de navigation, à savoir `src/components/NavBar.jsx`

Configuration du routage React

Maintenant que notre application est configurée, passons à la configuration du routage.

Ouvrez le fichier `App.jsx` et supprimez tout son contenu. Ensuite, ajoutez les importations suivantes au début du fichier :

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";

Nous importons les composants `BrowserRouter`, `Routes` et `Route` de `react-router-dom`, qui serviront à la configuration du routeur. Nous importons également le composant `NavBar` ainsi que les différents composants de page.

Ensuite, configurons le composant `App` :

export default App () {

}

Ajoutons ensuite le balisage suivant dans la déclaration return :

return (
    <BrowserRouter>
      
    </BrowserRouter>
)

Cela intègre le composant `BrowserRouter` fourni par `react-router-dom`, responsable de la configuration du routeur dans le navigateur. Notre application sera encapsulée dans ces balises.

Ajoutons la barre de navigation et créons un composant `Routes` :

return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          
        </Routes>
      </div>
    </BrowserRouter>
  );

Nous avons ajouté la barre de navigation (`NavBar`) dans `BrowserRouter`. Nous la définirons plus tard, mais elle créera les liens en haut de chaque page. Au lieu de l’écrire séparément pour chaque page, nous allons créer une `NavBar`.

Ensuite, nous avons créé un conteneur. Cet élément n’est pas nécessaire au routage, nous l’avons simplement ajouté pour l’esthétisme.

À l’intérieur du conteneur, nous avons inséré le composant `Routes`. C’est ici que les différentes pages seront affichées en fonction de la route utilisée par le navigateur. Tout ce qui se trouve dans le composant `Routes` sera mis à jour à chaque changement de route.

Enfin, ajoutons les routes pour nos différentes pages :

  return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          <Route path="/" Component={Home} />
          <Route path="about" Component={About} />
          <Route path="notes" Component={Notes}>
            <Route path="new" Component={NewNote} />
            <Route path=":id" Component={Note} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );

Le composant `Home` sera affiché lorsque le chemin est « / », le composant `About` sera affiché sur la route « /about ». Le composant `Notes` sera affiché sur la route ‘/notes’. Nous avons également défini les routes ‘/notes/new’ et ‘/notes/:id’ comme routes imbriquées.

Explication des routes imbriquées

Une route peut inclure des routes internes, appelées routes imbriquées. Le chemin de ces routes imbriquées sera fusionné avec celui de la route parent pour former le chemin complet. Par exemple, les routes « notes » et « new » seront combinées pour créer « /notes/new ».

Lorsqu’un utilisateur accède à la route parent, seul le composant parent est affiché. Toutefois, les composants parent et enfant seront tous deux affichés lorsque l’utilisateur accède à la route imbriquée.

Pour que les deux composants s’affichent ensemble, le composant `Notes` doit intégrer un composant `Outlet`, lequel spécifie l’endroit où le composant `Note` sera inséré. Vous le constaterez plus en détail lorsque nous commencerons à créer les pages.

Routes dynamiques

Jusqu’à présent, nous avons spécifié les routes littérales que nous voulons faire correspondre, par exemple « / » et « about ». Cependant, `react-router-dom` permet également la création de routes dynamiques. Une route dynamique comprend une partie qui agit comme un paramètre de requête. Une fois la correspondance établie, ce paramètre est transmis à la page.

Par exemple, dans la route parent « posts », une route imbriquée contient une partie dynamique, identifiée par `:id`. Cette route accepte n’importe quel texte à la place de `:id`, et ce texte devient disponible pour le composant `Note` sous le nom d’ `id`.

Construction de la barre de navigation

Pour la navigation avec `react-router-dom`, nous utilisons le composant `Link` au lieu des balises d’ancrage classiques. Notre barre de navigation sera donc construite de la manière suivante :

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

export function NavBar() {
  return (
    <div className="nav-container">
      <Link to="/">Scribbble</Link>
      <nav className="nav">
        <Link to="/about">About</Link>
        <Link to="/notes">Notes</Link>
        <Link to="/notes/new">New Note</Link>
      </nav>
    </div>
  );
}

Ajoutez ce code à `src/pages/NavBar.jsx`.

Création des pages

Maintenant, nous allons créer les différentes pages. Pour la page d’accueil, ajoutez le code ci-dessous dans le fichier `src/pages/Home.jsx` :

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

export function Home() {
  const navigate = useNavigate();

  return (
    <div className="home-container">
      <h1>Notes for professionals</h1>
      <div className="home-buttons">
        <button
          onClick={() => {
            navigate("/notes/new");
          }}
          className="button primary"
        >
          Start Scribbling
        </button>
        <button
          onClick={() => {
            navigate("/notes");
          }}
          className="button secondary"
        >
          View Notes
        </button>
      </div>
    </div>
  );
}

Dans la page d’accueil, nous utilisons des boutons pour la navigation. C’est pourquoi nous utilisons le hook `useNavigate` pour la navigation par programmation. Après avoir importé le hook, nous l’appelons dans le composant `Home`. La valeur de retour du hook est une fonction que vous pouvez utiliser pour naviguer.

Définissons maintenant la page À propos. Ajoutez le code suivant dans votre fichier `src/pages/About.jsx` :

export function About() {
  return (
    <div>
      <h1>About</h1>
      <p>Simple Notes is the best note-taking application for professionals</p>
    </div>
  );
}

Ensuite, définissons la page Notes :

Dans ce composant, nous devons également inclure un composant `Outlet` qui servira à l’affichage des routes imbriquées. Le contenu de votre fichier `src/pages/Notes.jsx` doit donc être le suivant :

import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";

export function Notes() {
  const navigate = useNavigate();
  return (
    <div>
      <Outlet />
      <div className="notes-list">
        {notes.map((note) => {
          return (
            <div
              className="note"
              key={note.id}
              onClick={() => {
                navigate("/notes/" + note.id);
              }}
            >
              <h2>{note.title}</h2>
              <p>{note.body.slice(0, 100)}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Définissons ensuite la page Note :

Celle-ci sera affichée pour chaque note individuelle. Pour déterminer la note à afficher, `Notes` accède à l’identifiant spécifié dans la partie dynamique de la route. Pour cela, nous utilisons le hook `userParams`. Le code du fichier `src/pages/Note.jsx` doit être le suivant :

import { useParams } from "react-router-dom";
import notes from "../notes";

export function Note() {
  const params = useParams();
  const note = notes.find((note) => note.id == params.id);
  return (
    <div className="note-container">
      <div className="note-content">
        <h2>{note.title}</h2>
        <p>{note.body}</p>
      </div>
    </div>
  );
}

Enfin, nous allons créer le composant `NewNote` dans le fichier `src/pages/NewNote.jsx` en utilisant le code suivant :

export function NewNote() {
  return (
    <div class="new-note-container">
      <form class="new-note-form">
        <h2>New Note</h2>
        <input type="text" name="title" placeholder="Note title" />
        <textarea rows="10" placeholder="Note text" />
        <button class="button primary">Save Note</button>
      </form>
    </div>
  );
}

À ce stade, nous avons écrit tout le code de l’application. Vous pouvez exécuter l’application avec la commande `npm run dev`. Naviguez entre les différentes pages et constatez la vitesse du routage côté client.

Inconvénients du routage côté client

Malgré ses avantages, le routage côté client présente certains inconvénients, expliqués ci-dessous :

• Le premier chargement de la page peut être lent, car l’ensemble de l’application doit être téléchargé. Le bundle JavaScript peut être volumineux, engendrant un temps de chargement conséquent.
• Étant donné que c’est le JavaScript qui génère le balisage, la page ne sera pas optimisée pour le référencement.
• Comme tout repose sur JavaScript, les navigateurs qui ne prennent pas en charge JavaScript ou qui ont JavaScript désactivé ne pourront pas exécuter l’application.

Conclusion

Dans cet article, nous avons exploré le routage React en construisant un petit projet. Bien que nous n’ayons pas tout couvert, ce tutoriel aborde les concepts que vous utiliserez dans la majorité de vos projets. Pour plus d’informations sur React-Router-Dom, voici la documentation officielle.

Pour aller plus loin, je vous propose de lire cet article sur les bibliothèques de formulaires React.