Routing avec React

Mis à jour : 19/01/2025 Danny

Nous allons implémenter dans notre projet la fonctionnalité suivante :

Le routing

Le routing est le mécanisme qui permet de naviguer d'une page à une autre sur un site web.

React dispose de la librairie react-router-dom

Celle-ci nous permettra de gérer rapidement et facilement la navigation au travers du routing.

Si vous n'avez pas le temps de lire ce guide en entier,
téléchargez le maintenant

Création du projet

Pour pouvoir continuer ce tutoriel nous devons bien évidemment disposer de certains éléments

Node.js : La plateforme javascript
Git : Le logiciel de gestion de versions.
Visual Studio code : Un éditeur de code.

Vous pouvez consulter le tutoriel suivant qui vous explique comment faire

https://www.ganatan.com/tutorials/demarrer-avec-react

Dans ce tutoriel nous allons utiliser un projet existant dont les caractéristiques sont

Genéré avec create-react-app

# Créez un répertoire demo (le nom est ici arbitraire)
mkdir demo

# Allez dans ce répertoire
cd demo

# Récupérez le code source sur votre poste de travail
git clone https://github.com/ganatan/angular-react-starter

# Allez dans le répertoire qui a été créé
cd angular-react-starter
cd react

# Exécutez l'installation des dépendances (ou librairies)
npm install

# Exécutez le programme
npm run start

# Vérifiez son fonctionnement en lançant dans votre navigateur la commande
http://localhost:3000/

Initialisation

React ne propose pas de module traitant du routing.

La documentation nous donne les conseils suivants
https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

Nous ferons appel à une librairie externe react-router-dom

Le site officiel et le dépôt github sont accessibles aux adresses suivantes
https://reacttraining.com/react-router/
https://github.com/ReactTraining/react-router

Il nous faut installer la dépendance correspondante

# Installer
npm install --save react-router-dom

Tout d'abord nous allons créer quatre fichiers qui seront utilisés dans le routing.

Home.js
Contact.js
About.js
NotFound.js

src/Home.js

import React from 'react'

const Home = () => (
  <p>
    home works!
</p>
)

export default Home

src/Contact.js

import React from 'react'

const Contact = () => (
  <p>
    contact works!
</p>
)

export default Contact

src/About.js

import React from 'react'

const About = () => (
  <p>
    about works!
</p>
)

export default About

src/NotFound.js

import React from 'react'

const NotFound = () => (
  <p>
  NotFound works!
</p>
)

export default NotFound

Enfin le traitement du routing s'effectuera dans le fichier App.js.
Pour complèter effectuons une modification graphique dans les fichiers App.css et Index.css

src/App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
} from 'react-router-dom'

import './App.css';

import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';


class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <header>
            <section>
              <h1> react-starter </h1>
              <h2> (React version 18.0.2) </h2>
            </section>
            <nav>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
              </ul>
            </nav>
          </header>
          <main>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route exact path="*" component={NotFound} />
            </Switch>
          </main>
        </div>
      </Router >
    );
  }
}

export default App;

App.css

h1 {
    color: blue;
}

Index.css

body {
  color: black;
  font-weight: 400;
}

Conclusion

Il ne reste plus qu'à tester les scripts suivants.

# développement
npm run start
http://localhost:3000/

# Tests
npm run test

# Compilation
npm run build

# Production
http-server -p 8080 -c-1 build
http://localhost:8080/

Code Source

Le code source utilisé en début de tutoriel est disponible sur github
https://github.com/ganatan/angular-react-starter

Le code source obtenu à la fin de ce tutoriel est disponible sur github
https://github.com/ganatan/angular-react-routing