Commenr résoudre l'erreur "'useHistory' is not exported from 'react-router-dom'" ?

"React Router" est un des modules les plus utilisés dans l'univers du développement React. Il permet de gérer la navigation et le routage des URL dans une application web. Comme les applications React sont intégralement codées en JavaScript, la page n'est pas rechargée quand on clique sur un élément. Les éléments sont chargés de manière dynamique, et c'est avec le code, grâce à la librairie "React Router", que l'URL change dans le navigateur. Cela permet à l'utilisateur de revenir sur une page, et aux moteurs de recherche d'indexer plus facilement le site internet. Le message d'erreur "'useHistory' is not exported from 'react-router-dom'" est dû à une mise à jour de la librairie.

Depuis la version 6 de la librairie, le hook "useHistory()", qui gère l'historique du navigateur pour lui ajouter une URL visitée (et changer celle en cours durant la navigation), a été remplacé. Il faut maintenant utiliser le hook "useNavigate()". Si vous oubliez de migrer votre code, le message d'erreur "'useHistory' is not exported from 'react-router-dom'" sera affiché lors des tests de votre application. Les 2 hooks ne fonctionnent pas de la même façon. Alors que le hook "useHistory()" proposait des méthodes séparées selon nos besoins, le hook "useNavigate()" propose une seule méthode, la méthode "navigate()" qui répond à tous les besoins selon les paramètres qu'on lui indique. Il est donc plus simple à utiliser.

// À partir de la version 6 de React Router
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// Aller sur une autre page
navigate('/chemin');
// Remplacer une URL dans l'historique
navigate('/chemin', { replace: true })
// Utiliser un objet state
navigate('/chemin', { state: { name:'ABC' }})
// Avancer et reculer dans l'historique
navigate(1)
navigate(-1)
// Avancer ou reculer de X pages (X peut être positif ou négatif)
navigate(X)

Les développeurs de la librairie "React Router" ont créé un guide de migration destiné aux développeurs pour passer des versions 5 et 5.1 vers la version 6. Une section de ce guide détaille le passage de "useHistory()" à "useNavigate()" : https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md#use-usenavigate-instead-of-usehistory.

JavaScript