Peamine probleem, mis on seotud andmete edastamisega reageerimise ruuteri ajaloos, on see, et andmeid ei säilitata lehe värskendamise ajal. Kui kasutaja lehte värskendab, lähevad ajalugu.pushisse salvestatud andmed kaotsi ja neid ei saa kasutada järgmistel lehelaadimistel. See võib põhjustada ootamatut käitumist ja probleeme, kui proovite juurde pääseda või salvestada eelmise lehe laadimise andmeid.
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. See rida impordib react-ruuter-dom teegist konksu useHistory, mis annab juurdepääsu ajalooobjektile, mis jälgib rakenduse praegust asukohta.
2. See rida deklareerib funktsionaalse komponendi nimega MyComponent ja määrab selle konstantsele muutujale.
3. See rida kasutab 1. real imporditud konksu useHistory, et saada juurdepääs ajalooobjektile ja määrata see konstantsele muutujale nimega ajalugu.
4. See rida deklareerib funktsiooni HandelClick, mis võtab argumendi nimega data ja surub teenime ja oleku atribuute sisaldava objekti ajaloovirna, kasutades ajalugu.push().
5. See rida tagastab nupuelemendi koos onClicki sündmuste töötlejaga, mis kutsub kasutaja klõpsamisel välja HandClick() ja mille argumendiks on mõned andmed.
Ajaloo tõuge
History push in React Router on meetod, mida kasutatakse brauseris URL-i programmiliseks muutmiseks ilma lehe värskendamist põhjustamata. See võimaldab arendajatel luua ühelehelisi rakendusi, mis saavad endiselt hakkama navigeerimise ja sügava linkimisega. Ajaloo tõuge töötab brauseri ajaloo API abil, mis võimaldab arendajatel manipuleerida praeguse URL-iga ilma lehte uuesti laadimata. See võimaldab kasutajatel navigeerida rakenduse erinevate lehtede vahel, ilma et peaks iga kord uuesti laadima. Lisaks saab seda kasutada süvalinkimiseks, võimaldades kasutajatel linkida otse rakenduse teatud osadesse.
Kuidas kasutada ajalugu React-ruuteris
React Router pakub võimalust kasutada Reacti rakendustes ajalugu. Ajalugu võimaldab jälgida nii praegust kui ka varasemaid külastatud lehti. See on kasulik navigeerimise loomiseks ja kasutaja tegevuste jälgimiseks.
Ajaloo kasutamiseks React Routeris peate ajaloopaketist meetodiga createHistory() looma ajalooobjekti. See annab teile juurdepääsu meetoditele nagu push(), asenda() ja go(). Need meetodid võimaldavad teil manipuleerida brauseri URL-iga ja navigeerida rakenduses erinevate marsruutide vahel. Samuti saate kasutada meetodit listen(), et kuulata URL-i muudatusi ja värskendada oma rakendust vastavalt.
Kui olete ajalooobjekti loonud, saate selle loomisel ruuteri komponenti edastada. See võimaldab React Routeril jälgida kõiki kasutajate tehtud muudatusi ja neid vastavalt värskendada.
Ajaloo kasutamine koos React Routeriga muudab arendajatel lihtsamaks võimsate navigeerimiskomponentide loomise, mida kasutajatel on lihtne mõista ja millega on lihtne suhelda.
