1. Le fonctionnement de la navigation

Tout d’abord, vous devez savoir que React ne possède pas de système de navigation par défaut. À la base, React s’occupe simplement de l’interaction entre vos composants et le DOM virtuel. Cependant, il existe une librairie permettant d’ajouter un système de navigation dans votre application React. Cette librairie se nomme React Router DOM, car elle permet d’ajouter la navigation dans le DOM du navigateur, tout simplement. Cette librairie simule parfaitement la navigation auprès de votre navigateur. Lorsque vous naviguez dans votre application, vous pouvez revenir en arrière, rentrer directement une url dans la barre du navigateur pour rejoindre une autre page de votre application, et l’historique du navigateur sera automatiquement mis à jour ! La librairie React Router s’occupe pour nous de simuler la navigation auprès du navigateur.

… et comment on le met en place ce merveilleux système de navigation ?

Avant de voir l’aspect technique de la chose, il faut bien sûr s’assurer que la librairie React Router est bien présente dans votre application. Jetez un oeil à votre fichier package.json :

{
  "name": "first",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/node": "12.11.1",
    "@types/react": "16.9.9",
    "@types/react-dom": "16.9.2",
    "@types/react-router-dom": "^5.1.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "typescript": "3.6.4"
  },
  ...
}

Les deux dépendances aux lignes 9 et 12 correspondent respectivement à la librairie React Router DOM et à son adaptation pour TypeScript. Cela permettra entre autre de rajouter le typage des variables aux éléments géré par le système de navigation de React.

Pour commencer, nous allons mettre en place un système de routes basique entre deux pages de notre application.