Sommaire

Gestion du routage avec React Router Routage React Router

Notre application permet déjà une navigation cohérente grâce à la manière dont nous l’avons gérée, c’est-à-dire dans le state local du composant App. Nous avons deux attributs isCreatingExpense et currentlyEdited Expense, indiquant respectivement si on est sur le formulaire de création ou le formulaire d’édition. Dans ce cas, que va-t-on ajouter dans cette section ?

En utilisant une stratégie de routage, nous allons :

  • mettre à jour l’URL de la page en fonction de l’emplacement de l’application dans lequel se trouve l’utilisateur (liste des dépenses, création ou modification) ; URL

  • permettre à l’utilisateur de naviguer dans l’historique grâce aux boutons Précédent et Suivant de son navigateur (pour revenir à la liste des dépenses par exemple) ; Historique

  • offrir la possibilité de se rendre à un emplacement de l’application défini dans l’URL, par exemple en ajoutant l’URL aux favoris, en la partageant, ou en rafraîchissant la page.

Toutes ces fonctionnalités nous sont offertes par React Router (https://reacttraining.com/react-router/), bibliothèque la plus utilisée pour gérer le routage d’une application React, que ce soit pour le Web ou le mobile.

Afin d’implémenter le routage dans notre application, procédons par étape. ...