Routing avec React 18

Mis à jour : 13/12/2022 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.

Le routing avec React et react-router-dom​​​​​​​

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


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
​​​​​​​