7. Conclusion

Nous avons vu dans ce chapitre comment créer un système de navigation dans notre application, en liant deux composants à des urls. Nous savons aussi passer des paramètres à un composant, via les routes de notre application. Nous avons également vu comment gérer les erreurs 404, le cas où l’utilisateur souhaite afficher un Pokémon qui n’existe pas, et comment afficher du code commun entre plusieurs page de notre application.

Mais pour aller vers des applications plus poussées, je vous propose de voir dans le prochain chapitre comment développer des formulaires, ce qui nous permettra à l’utilisateur de mieux interagir avec notre application. Allez, courage, on avance petit à petit !

En résumé

  • React utilise la librarie react-router-dom pour mettre en place un système de navigation.
  • React simule la navigation de l’utilisateur auprès du navigateur, sans que nous n’ayons rien à faire.
  • On construit un système de navigation en associant une url et un composant.
  • Le routeur de React interprète les routes du haut vers le bas. Il faut donc être prudent quant à l’ordre de déclaration de nos routes.
  • Il est possible de faire passer des paramètres depuis nos urls vers un composant, et de typer ces paramètres avec TypeScript.
  • La balise <Switch> permet d’injecter le template d’un composant en fonction de l’url demandée par l’utilisateur.
  • La balise <Route> permet de définir une route au sein de notre application.
  • Pour gérer les erreurs 404 dans notre application, il faut déclarer en dernier un élément Route qui ne prend pas de chemin. Ainsi, toutes les urls seront interceptés par cet élément.