Glavni problem povezan s prosljeđivanjem podataka u povijesti usmjerivača reakcije, push je taj što se podaci ne zadržavaju tijekom osvježavanja stranice. Kada korisnik osvježi stranicu, podaci pohranjeni u history.push bit će izgubljeni i neće biti dostupni za korištenje pri sljedećim učitavanjima stranice. To može dovesti do neočekivanog ponašanja i problema pri pokušaju pristupa ili pohranjivanja podataka iz prethodnog učitavanja stranice.
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. Ovaj redak uvozi useHistory kuku iz biblioteke react-router-dom, koja omogućuje pristup povijesnom objektu koji prati trenutnu lokaciju u aplikaciji.
2. Ovaj redak deklarira funkcionalnu komponentu nazvanu MyComponent i dodjeljuje je konstantnoj varijabli.
3. Ovaj redak koristi kuku useHistory uvezenu u retku 1 da dobije pristup objektu povijesti i dodijeli ga konstantnoj varijabli koja se zove povijest.
4. Ovaj redak deklarira funkciju pod nazivom handleClick koja uzima argument koji se zove data i gura objekt koji sadrži ime staze i svojstva stanja na stog povijesti pomoću history.push().
5. Ovaj redak vraća element gumba s rukovateljem događaja onClick koji poziva handleClick() s objektom koji sadrži someData kao svoj argument kada klikne korisnik.
Guranje povijesti
Guranje povijesti u React Routeru je metoda koja se koristi za programsku promjenu URL-a u pregledniku bez osvježavanja stranice. Omogućuje programerima stvaranje jednostraničkih aplikacija koje još uvijek mogu rukovati navigacijom i dubinskim povezivanjem. History push funkcionira korištenjem API-ja povijesti preglednika, koji programerima omogućuje manipuliranje trenutnim URL-om bez ponovnog učitavanja stranice. To korisnicima omogućuje navigaciju između različitih stranica aplikacije bez potrebe da se svaki put ponovno učitavaju. Osim toga, može se koristiti za dubinsko povezivanje, omogućujući korisnicima izravno povezivanje na određene dijelove aplikacije.
Kako mogu koristiti povijest u React routeru
React Router pruža način korištenja povijesti u vašim React aplikacijama. Povijest vam omogućuje da pratite trenutnu stranicu, kao i sve prethodne stranice koje ste posjetili. Ovo je korisno za stvaranje navigacije i praćenje radnji korisnika.
Da biste koristili povijest u React Routeru, morate stvoriti objekt povijesti pomoću metode createHistory() iz paketa povijesti. To će vam omogućiti pristup metodama kao što su push(), replace() i go(). Ove vam metode omogućuju manipuliranje URL-om preglednika i navigaciju između različitih ruta u vašoj aplikaciji. Također možete koristiti metodu listen() za slušanje promjena u URL-u i ažuriranje vaše aplikacije u skladu s tim.
Nakon što ste kreirali objekt povijesti, možete ga proslijediti svojoj komponenti usmjerivača kada ga kreirate. To će omogućiti React Routeru da prati sve promjene koje su napravili korisnici i da ih ažurira u skladu s tim.
Korištenje povijesti s React Routerom olakšava programerima stvaranje snažnih navigacijskih komponenti koje su korisnicima jednostavne za razumijevanje i interakciju s njima.
