Utiliser le routing en React

Introduction

Maintenant qu'on sait comment utiliser des hooks en React, il est temps de découvrir une fonctionnalité essentielle présente dans tous les sites web : le routing. Le routing permet de naviguer entre différentes pages sans recharger la page web. Aujourd'hui, je vais vous montrer comment utiliser React Router pour gérer la navigation dans une application React.

Étapes du tutoriel

Dans ce tutoriel, nous allons voir comment ajouter et configurer React Router pour permettre la navigation entre plusieurs pages.

Installer React Router

Avant de commencer, il faut installer la librairie React Router. Dans votre terminal, entrez la commande suivante :

1npm install react-router-dom

Cette commande va ajouter React Router à notre projet et nous permettre de gérer le routing.

Configurer le routing

Une fois l'installation terminée, on doit configurer React Router dans notre application. Voici comment procéder :

1. Ouvrez le fichier src/App.js et ajoutez l'import suivant :

1import { BrowserRouter } from 'react-router-dom';

1. Entourez votre application avec BrowserRouter :

1import React from 'react';
2import App from './App';
3import { BrowserRouter } from 'react-router-dom';

Cela permet à React Router de fonctionner dans toute l'application.

Créer des routes

Maintenant, on va ajouter des routes dans App.js.

1. Ouvrez src/App.js et ajoutez les imports suivants :

1import { Routes, Route } from 'react-router-dom';
2import Home from './Home';
3import About from './About';

1. Ensuite, remplacez le contenu du return par :

1function App() {
2  return (
3    <div>
4      <h1>Mon application React</h1>
5      <Routes>
6        <Route path="/" element={<Home />} />
7        <Route path="/about" element={<About />} />
8      </Routes>
9    </div>
10  );
11}
12
13export default App;

Ici, on définit deux pages : Home pour la page d'accueil (/) et About pour la page "À propos" (/about).

Créer les composants des pages

Créez deux composants rapide et simple dans les fichiers Home.js et About.js.

1. Dans src/, créez un fichier Home.js et ajoutez :

1function Home() {
2  return <h2>Bienvenue sur la page d'accueil !</h2>;
3}
4
5export default Home;

1. Dans src/, créez un fichier About.js et ajoutez :

1function About() {
2  return <h2>À propos de cette application</h2>;
3}
4
5export default About;

Ajouter une navigation

Pour naviguer facilement entre nos pages, on va ajouter des liens.

1. Modifiez App.js en ajoutant ces imports :

1import { Link } from 'react-router-dom';

1. Ajoutez ces liens avant <Routes> :

1<nav>
2  <Link to="/">Accueil</Link> | <Link to="/about">À propos</Link>
3</nav>

Le fichier App.js complet devrait ressembler à ceci :

1import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
2import Home from './Home';
3import About from './About';
4
5function App() {
6  return (
7    <Router>
8      <div>
9        <h1>Mon application React</h1>
10        <nav>
11          <Link to="/">Accueil</Link> | <Link to="/about">À propos</Link>
12        </nav>
13        <Routes>
14          <Route path="/" element={<Home />} />
15          <Route path="/about" element={<About />} />
16        </Routes>
17      </div>
18    </Router>
19  );
20}
21
22export default App;

Maintenant, lorsque vous cliquez sur "Accueil" ou "À propos", la page change sans rechargement.

Conclusion

Voila. Nous avons mis en place un système de navigation en React avec React Router. Maintenant, nous pouvons ajouter plusieurs pages et améliorer notre application en la rendant plus interactive.

Sources

• W3Schools. (s.d.). React Router. Consulté le 1 mars 2025, à l’adresse https://www.w3schools.com/react/react_router.asp
• Ndaw, I. (17 février 2020). Le guide complet de React Router. Ibrahima Ndaw. Consulté le 1 mars 2025, à l’adresse https://www.ibrahima-ndaw.com/fr/blog/the-complete-guide-to-react-router/