Mettre en place un système de routage

Mettre en place un système de routage | Med Learning

Leçon 1

Qu'est-ce que le routage ?

Le routage est la capacité d'afficher différentes pages à l'utilisateur : il peut naviguer entre les parties de l'application en tapant une URL ou en cliquant sur un élément.

Avec React, on fait des applications monopage (SPA, chapitre 2) : on écrit plusieurs composants, mais il n'y a qu'un seul fichier HTML servi à l'utilisateur : index.html. Le routeur choisit quel composant afficher selon l'URL, sans recharger la page.

React ne contient pas de routage. Il faut ajouter la bibliothèque react-router :

bash

npm install react-router-dom

React Router permet de définir des URL et de choisir le composant à afficher (render) pour chacune :

80% Une seule page index.html, un composant par URL

plantuml

@startuml
skinparam shadowing false
rectangle "index.html\n<BrowserRouter>" as R
rectangle "<Route path=\"/\">\ncomposant Home" as H
rectangle "<Route path=\"/about\">\ncomposant About" as A
rectangle "<Route path=\"/blog\">\ncomposant Blog" as B
R --> H : http://localhost:3000/
R --> A : http://localhost:3000/about
R --> B : http://localhost:3000/blog
@enduml

Leçon 2

BrowserRouter ou HashRouter

React Router fournit deux composants qui diffèrent par le type d'URL qu'ils créent :

text

// <BrowserRouter>
http://example.com/about
// <HashRouter>
http://example.com/#/about

	`<BrowserRouter>`	`<HashRouter>`
URL	propre : `/about`	avec un dièse : `/#/about`
technique	l'API History de HTML5	le hash de l'URL (`window.location.hash`)
usage	le plus courant	les anciens navigateurs, ou un hébergement qui ne sait pas renvoyer `index.html` pour toutes les URL

Leçon 3

Le composant Route

Leçon 4

L'exemple : Home, About, Blog

Élément	Rôle
`<BrowserRouter>` (dans `index.js`)	entoure toute l'application : il active le routage
`<Link to="/about">`	un lien qui change l'URL sans recharger la page (il remplace `<a href>`)
`<Routes>`	contient toutes les routes ; affiche la route qui correspond à l'URL

Leçon 5

TP · La boutique d'ordinateurs (13-shop-router)

Travaux pratiques

TP · La boutique d'ordinateurs

Exercices

Exercice 12.1

QCM : le routage

1La commande pour installer React Router est…
2Quelle URL crée <HashRouter> ?
3<BrowserRouter> s'appuie sur…
4En React Router v6, on écrit…
5En v6, les routes doivent être dans…
6Pour naviguer sans recharger la page, on utilise…
7Dans /produits/:id, on lit id avec…
8path="*" sert à…

0/8 répondues

Exercice 12.2

Convertis en v6

Exercice 12.3

L'essentiel du chapitre

À retenir

Routage : afficher des « pages » différentes dans une SPA (un seul index.html) selon l'URL ; React n'en a pas : npm install react-router-dom.
<BrowserRouter> (URL propres, API History, le plus courant) ou <HashRouter> (/#/about, anciens navigateurs) : il entoure l'application dans index.js.
v6/v7 : <Routes> + <Route path="/about" element={<About />} /> ; correspondance exacte par défaut (plus de exact, plus de component=, plus de Switch).
<Link to="/about"> au lieu de <a href> ; NavLink pour le lien actif.
Paramètre : path="/produits/:id" + useParams() ; 404 : path="*" ; navigation dans le code : useNavigate().

App.js

jsx

import React, { Component } from 'react';
import './App.css';
import { Routes, Route, Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/blog">Blog</Link>
          </li>
        </ul>
        <div className="main-route-place">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/blog" element={<Blog />} />
          </Routes>
        </div>
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
}

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
}

class Blog extends React.Component {
  render() {
    return (
      <div>
        <h2>Blog</h2>
      </div>
    );
  }
}

export default App;

index.js

jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

src/data.js (les données, comme au TP du chapitre 4)

jsx

const products = [
  { id: 1, title: 'PC Portable Gamer HP VICTUS', price: '7490 DH', thumbnail: 'HP16D0195NF.jpg',
    description: 'Écran 16,1 pouces, carte graphique dédiée, 16 Go de RAM.' },
  { id: 2, title: 'PC Portable Gamer HP VICTUS', price: '2190 DH', thumbnail: 'HP14424U3EA.jpg',
    description: 'Écran 15,6 pouces, 8 Go de RAM, SSD 512 Go.' },
  { id: 3, title: 'Pc Portable Chromebook Acer', price: '3640 DH', thumbnail: 'NXATHEF002.jpg',
    description: 'Chrome OS, 14 pouces, autonomie 10 heures.' },
  { id: 4, title: 'PC Portable - HUAWEI', price: '1270 DH', thumbnail: 'HUA6901443442959.jpg',
    description: 'Ultra-fin, 14 pouces, 8 Go de RAM.' },
];
export default products;

jsx

import { Routes, Route, useParams } from 'react-router-dom';

<Routes>
  <Route path="/produit/:id" element={<Produit />} />
  <Route path="*" element={<h2>Page introuvable</h2>} />
</Routes>

function Produit() {
  const { id } = useParams();     // "3" pour l'URL /produit/3
  return <h2>Produit numéro {id}</h2>;
}

TP · La boutique d'ordinateurs

Exercices

À retenir

Le menu actif