El principal problema relacionat amb el pas de dades a l'historial de l'encaminador de reacció, push és que les dades no es mantenen durant les actualitzacions de la pàgina. Quan un usuari actualitza la pàgina, les dades emmagatzemades a history.push es perdran i no estaran disponibles per utilitzar-les en càrregues de pàgines posteriors. Això pot provocar un comportament inesperat i pot causar problemes quan s'intenta accedir o emmagatzemar dades d'una càrrega de pàgina anterior.
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. Aquesta línia importa el ganxo useHistory de la biblioteca react-router-dom, que proporciona accés a l'objecte d'historial que fa un seguiment de la ubicació actual a l'aplicació.
2. Aquesta línia declara un component funcional anomenat MyComponent i l'assigna a una variable constant.
3. Aquesta línia utilitza el ganxo useHistory importat a la línia 1 per accedir a l'objecte d'historial i assignar-lo a una variable constant anomenada history.
4. Aquesta línia declara una funció anomenada handleClick que pren un argument anomenat data i envia un objecte que conté el nom del camí i les propietats d'estat a la pila d'historial mitjançant history.push().
5. Aquesta línia retorna un element botó amb un controlador d'esdeveniments onClick que crida a handleClick() amb un objecte que conté someData com a argument quan un usuari fa clic.
Empenta de la història
L'historial push a React Router és un mètode que s'utilitza per canviar programàticament l'URL al navegador sense provocar una actualització de la pàgina. Permet als desenvolupadors crear aplicacions d'una sola pàgina que encara poden gestionar la navegació i els enllaços profunds. History push funciona mitjançant l'ús de l'API de l'historial del navegador, que permet als desenvolupadors manipular l'URL actual sense tornar a carregar la pàgina. Això fa possible que els usuaris naveguin entre diferents pàgines d'una aplicació sense haver de tornar a carregar cada vegada. A més, es pot utilitzar per a enllaços profunds, permetent als usuaris enllaçar directament a parts específiques d'una aplicació.
Com puc utilitzar l'historial al router de reacció
React Router ofereix una manera d'utilitzar l'historial a les vostres aplicacions React. L'historial us permet fer un seguiment de la pàgina actual, així com de les pàgines anteriors que s'hagin visitat. Això és útil per crear navegació i fer un seguiment de les accions dels usuaris.
Per utilitzar l'historial a React Router, heu de crear un objecte d'historial mitjançant el mètode createHistory() del paquet d'historial. Això us donarà accés a mètodes com push(), replace() i go(). Aquests mètodes us permeten manipular l'URL del navegador i navegar entre diferents rutes de la vostra aplicació. També podeu utilitzar el mètode listen() per escoltar els canvis a l'URL i actualitzar l'aplicació en conseqüència.
Un cop hàgiu creat un objecte d'historial, podeu passar-lo al component del vostre encaminador quan el creeu. Això permetrà a React Router fer un seguiment de tots els canvis fets pels usuaris i actualitzar-los en conseqüència.
L'ús de l'historial amb React Router facilita als desenvolupadors la creació de components de navegació potents que són fàcils d'entendre i interactuar amb els usuaris.
