Riješeno: prosljeđivanje podataka u historiji react rutera%2Cpush

Glavni problem vezan za prosljeđivanje podataka u historiji react rutera, push je taj što se podaci ne zadržavaju tokom 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 narednim učitavanjima stranice. Ovo može dovesti do neočekivanog ponašanja i može uzrokovati probleme kada pokušavate pristupiti ili pohraniti podatke 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. Ova linija uvozi useHistory kuku iz biblioteke react-router-dom, koja omogućava pristup historijskom objektu koji prati trenutnu lokaciju u aplikaciji.

2. Ova linija deklarira funkcionalnu komponentu koja se zove MyComponent i dodjeljuje je konstantnoj varijabli.

3. Ova linija koristi useHistory kuku uvezenu u liniji 1 da dobije pristup historijskom objektu i dodijeli ga konstantnoj varijabli koja se zove historija.

4. Ova linija deklarira funkciju zvanu handleClick koja uzima argument koji se zove podaci i gura objekt koji sadrži ime putanje i svojstva stanja na historijski stog koristeći history.push().

5. Ova linija vraća element gumba s onClick obrađivačem događaja koji poziva handleClick() s objektom koji sadrži someData kao argument kada korisnik klikne na njega.

Istorija guranje

Guranje istorije u React Routeru je metoda koja se koristi za programsku promjenu URL-a u pretraživaču bez izazivanja osvježavanja stranice. Omogućava programerima da kreiraju aplikacije na jednoj stranici koje su i dalje u stanju da upravljaju navigacijom i dubinskim povezivanjem. Pritisak istorije funkcioniše korišćenjem API-ja istorije pretraživača, koji omogućava programerima da manipulišu trenutnim URL-om bez ponovnog učitavanja stranice. Ovo omogućava korisnicima da se kreću između različitih stranica aplikacije bez potrebe za ponovnim učitavanjem svaki put. Osim toga, može se koristiti za dubinsko povezivanje, omogućavajući korisnicima da se direktno povežu na određene dijelove aplikacije.

Kako da koristim historiju u react ruteru

React Router pruža način za korištenje historije u vašim React aplikacijama. Historija vam omogućava da pratite trenutnu stranicu, kao i sve prethodne stranice koje ste posjećivali. Ovo je korisno za kreiranje navigacije i praćenje radnji korisnika.

Da biste koristili historiju u React Routeru, trebate kreirati historijski objekat koristeći createHistory() metodu iz historijskog paketa. Ovo će vam dati pristup metodama kao što su push(), replace() i go(). Ove metode vam omogućavaju da manipulišete URL-om pretraživača i navigirate između različitih ruta u vašoj aplikaciji. Također možete koristiti metodu listen() da slušate promjene u URL-u i u skladu s tim ažurirate svoju aplikaciju.

Nakon što ste kreirali historijski objekt, možete ga proslijediti u komponentu rutera prilikom kreiranja. Ovo će omogućiti React Routeru da prati sve promjene koje su izvršili korisnici i da ažurira u skladu s tim.

Korišćenje istorije sa React Router-om olakšava programerima da kreiraju moćne komponente za navigaciju koje su lake za razumevanje i interakciju sa korisnicima.

Slični postovi:

Ostavite komentar