Comment accéder à un objet history dans React Router en dehors des composants ?
Dans le framework React, l'objet"history" permet d'interagir avec l'historique du navigateur. Le framework fonctionnant intégralement en JavaScript, il n'y a pas de changement de page comme avec un site en HTML classique. C'est grâce à cet objet que l'on peut envoyer une URL dans l'historique du navigateur pour revenir en arrière. Depuis la version 4 du framework, son utilisation est limitée à certains composants. Il est en revanche possible d'y accéder en dehors en créant un nouvel objet "history" dans votre module.
Pour commencer, il faut créer votre objet. Vous devez dans le code de cet objet importer la partie "createBrowserHistory" provenant de l'objet "history" grâce à la directive "import". Vous devez ensuite déclarer de nouveau cette fonction dont vous avez besoin avec la directive "export".
// history.js
// Notre objet récupère les méthodes de l'objet "history"
import { createBrowserHistory } from "history";
//On redéclare ensuite les méthodes
export default createBrowserHistory();
Ensuite, déclarez cet objet dans votre routeur. Veillez à ce que votre routeur fasse appel à la classe générique <router> et non à un routeur spécialisé.
// index.js
import { Router } from "react-router-dom";
import history from "./history";
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById("root")
);
Une fois ces opérations effectuées, vous pouvez utiliser votre objet "history" depuis n'importe quel fichier de votre projet. Vous devez seulement spécifier l'inclusion de l'objet avec la directive "import".
// exemple.js
import history from "./history";
export default function sauvegarderDansHistorique(url) {
history.push(url);
}