Le principal problème lié à la transmission de données dans l'historique du routeur de réaction, est que les données ne sont pas conservées lors des actualisations de page. Lorsqu'un utilisateur actualise la page, les données stockées dans history.push seront perdues et ne pourront pas être utilisées lors des chargements de page suivants. Cela peut entraîner un comportement inattendu et causer des problèmes lors de la tentative d'accès ou de stockage des données d'un chargement de page précédent.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Cette ligne importe le crochet useHistory de la bibliothèque react-router-dom, qui donne accès à l'objet historique qui garde une trace de l'emplacement actuel dans l'application.
2. Cette ligne déclare un composant fonctionnel appelé MyComponent et l'affecte à une variable constante.
3. Cette ligne utilise le crochet useHistory importé à la ligne 1 pour accéder à l'objet historique et l'affecter à une variable constante appelée history.
4. Cette ligne déclare une fonction appelée handleClick qui prend un argument appelé data et place un objet contenant les propriétés pathname et state dans la pile d'historique à l'aide de history.push().
5. Cette ligne renvoie un élément de bouton avec un gestionnaire d'événement onClick qui appelle handleClick() avec un objet contenant someData comme argument lorsqu'un utilisateur clique dessus.
Poussée d'histoire
Le push d'historique dans React Router est une méthode utilisée pour modifier par programmation l'URL dans le navigateur sans provoquer d'actualisation de la page. Il permet aux développeurs de créer des applications d'une seule page qui sont toujours capables de gérer la navigation et les liens profonds. Le push d'historique fonctionne en utilisant l'API d'historique du navigateur, qui permet aux développeurs de manipuler l'URL actuelle sans recharger la page. Cela permet aux utilisateurs de naviguer entre les différentes pages d'une application sans avoir à recharger à chaque fois. De plus, il peut être utilisé pour les liens profonds, permettant aux utilisateurs de se connecter directement à des parties spécifiques d'une application.
Comment utiliser l'historique dans le routeur de réaction
React Router fournit un moyen d'utiliser l'historique dans vos applications React. L'historique vous permet de garder une trace de la page en cours, ainsi que des pages précédentes qui ont été visitées. Ceci est utile pour créer une navigation et suivre les actions de l'utilisateur.
Pour utiliser l'historique dans React Router, vous devez créer un objet d'historique à l'aide de la méthode createHistory() du package history. Cela vous donnera accès à des méthodes telles que push(), replace() et go(). Ces méthodes vous permettent de manipuler l'URL du navigateur et de naviguer entre différentes routes dans votre application. Vous pouvez également utiliser la méthode listen() pour écouter les modifications apportées à l'URL et mettre à jour votre application en conséquence.
Une fois que vous avez créé un objet d'historique, vous pouvez le transmettre à votre composant de routeur lors de sa création. Cela permettra à React Router de suivre toutes les modifications apportées par les utilisateurs et de les mettre à jour en conséquence.
L'utilisation de l'historique avec React Router permet aux développeurs de créer plus facilement des composants de navigation puissants, faciles à comprendre et à interagir pour les utilisateurs.
