Skip to main content

Chapitre 11 : Navigation (React Router)

Le routing, Single Page Application (SPA), React Router

Le routing​

Dans une application web classique, changer de page provoque un rechargement complet du navigateur. Dans une application React, on cherche au contraire à offrir une navigation fluide, sans recharger toute l’application.

Le routing permet d’afficher différents composants selon l’URL, tout en restant dans une Single Page Application. L’application charge une seule fois, puis React gère les changements de vue.

Single Page Application (SPA)​

Une Single Page Application est une application qui fonctionne sur une seule page HTML.
Les changements de “pages” correspondent en réalité à des changements de composants affichés.
Cela permet :

  • une navigation plus rapide
  • une meilleure expérience utilisateur
  • un contrôle total de l’interface côté client

React est particulièrement adapté à ce type d’architecture.

React Router​

React Router est la bibliothèque la plus utilisée pour gérer la navigation dans une application React.
Elle permet de relier une URL à un composant spécifique.

En fonction de l’URL actuelle, React Router décide quel composant doit être affiché. Le développeur définit ces règles de navigation dans l’application Une route associe donc un chemin (URL) à un composant React.

Exemple:

  • “/” : Page d’accueil
  • “/about” : Page “à propos”

Il est possible de définir des routes avec des paramètres, qui peuvent être dynamiques (comme un identifiant). Exemple : afficher le profil d’un utilisateur. Le composant peut ensuite récupérer ces paramètres pour charger les données correspondantes.

Liens :
https://reactrouter.com/home

Questions clés (validation des acquis du chapitre)​

  • Pourquoi a-t-on besoin de routing dans une application React ? Pour afficher différentes pages sans recharger toute l’application.
  • Qu’est-ce qu’une SPA ? Une application où la navigation se fait sans rechargement complet de la page.
  • Quel est le rôle de React Router ? Associer des URLs à des composants React.
  • Pourquoi éviter les liens HTML classiques ? Parce qu’ils provoquent un rechargement complet de la page.
  • À quoi servent les paramètres de route ? À afficher des pages dynamiques basées sur l’URL.

Exercices :​

Exercice - Effectuer un routing simple​

  1. Créer une application avec :
  • une page “Accueil”
  • une page “À propos”
  • une page “Détail” accessible via un paramètre d’URL
  1. Permettre à l’utilisateur de naviguer entre ces pages sans rechargement, uniquement grâce au routing.
  2. Utiliser React router. Faire attention à utiliser des paramètres pertinents, et récupérer le paramètre “id” de l’URL pour l’afficher sur la page “Détail”

Pour cela, regarder la doc sur React Router : https://reactrouter.com/home