Comment utiliser history dans react router dom ?
La librairie React Router fait partie des librairies les plus utilisées dans l'univers React. Elle fournit un ensemble de méthodes permettant de gérer la navigation au sein de votre application. Elle est donc très souvent utilisée en même temps que React. Cette librairie est en constante évolution et chaque version apporte son lot de nouveautés. La version 6 a effectué un important remaniement avec des changements que vous allez devoir effectuer dans votre code. C'est notamment le cas pour la gestion de l'historique.
Avant la version 6, on utilisait la méthode "useHistory()" pour récupérer un objet permettant de manipuler l'historique du navigateur. On peut ensuite enregistrer une nouvelle URL dans l'historique du navigateur avec la méthode "push()" ou remplacer une URL avec "replace()".
// Avec les versions antérieures de React
let history = useHistory();
// Ajout d'une nouvelle URL
history.push("/home");
// Remplacement par une URL dans l'historique
history.replace("/new-home");
La version 6 du navigateur utilise la nouvelle API "navigate". On utilise la méthode "useNavigate" pour récupérer un objet qui peut modifier l'historique du navigateur. Une seule méthode gère à la fois l'ajout et le remplacement d'une URL : c'est la méthode "navigate()". Le deuxième paramètre est un booléen. La valeur "true" indique que l'on remplace par la nouvelle URL.
// À partir de la version 6 de React
let navigate = useNavigate();
// Ajout d'une nouvelle URL
navigate.navigate("/home");
// Remplacement par une URL dans l'historique
navigate.navigate("/new-home", true);