U zgjidh: kalimi i të dhënave në historikun e routerit react%2Cpush

Problemi kryesor që lidhet me kalimin e të dhënave në historikun e ruterit reagues, shtytje është se të dhënat nuk vazhdojnë gjatë rifreskimeve të faqeve. Kur një përdorues rifreskon faqen, të dhënat e ruajtura në history.push do të humbasin dhe nuk do të jenë të disponueshme për përdorim në ngarkimet pasuese të faqeve. Kjo mund të çojë në sjellje të papritura dhe mund të shkaktojë probleme kur përpiqeni të aksesoni ose ruani të dhënat nga ngarkimi i mëparshëm i faqes.

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. Kjo linjë importon grepin useHistory nga biblioteka react-router-dom, e cila siguron akses në objektin e historisë që mban gjurmët e vendndodhjes aktuale në aplikacion.

2. Kjo linjë deklaron një komponent funksional të quajtur MyComponent dhe ia cakton një ndryshoreje konstante.

3. Kjo linjë përdor grepin useHistory të importuar në rreshtin 1 për të marrë akses në objektin e historisë dhe për ta caktuar atë në një variabël konstante të quajtur histori.

4. Kjo linjë deklaron një funksion të quajtur handleClick që merr një argument të quajtur të dhëna dhe shtyn një objekt që përmban emrin e rrugës dhe vetitë e gjendjes në pirgun e historisë duke përdorur history.push().

5. Kjo linjë kthen një element butoni me një mbajtës të ngjarjeve onClick që thërret handleClick() me një objekt që përmban disa të dhëna si argument kur klikohet nga një përdorues.

Shtytje e historisë

Pushimi i historisë në React Router është një metodë e përdorur për të ndryshuar në mënyrë programore URL-në në shfletues pa shkaktuar një rifreskim të faqes. Ai i lejon zhvilluesit të krijojnë aplikacione me një faqe që janë ende në gjendje të trajtojnë navigimin dhe lidhjen e thellë. Pushtimi i historisë funksionon duke përdorur API-në e historisë së shfletuesit, i cili lejon zhvilluesit të manipulojnë URL-në aktuale pa e ringarkuar faqen. Kjo bën të mundur që përdoruesit të lundrojnë midis faqeve të ndryshme të një aplikacioni pa pasur nevojë të ringarkojnë çdo herë. Për më tepër, mund të përdoret për lidhje të thella, duke i lejuar përdoruesit të lidhen drejtpërdrejt në pjesë të veçanta të një aplikacioni.

Si ta përdor historinë në routerin e reagimit

React Router ofron një mënyrë për të përdorur historinë në aplikacionet tuaja React. Historia ju lejon të mbani gjurmët e faqes aktuale, si dhe çdo faqe të mëparshme që është vizituar. Kjo është e dobishme për krijimin e navigimit dhe për të mbajtur gjurmët e veprimeve të përdoruesit.

Për të përdorur historinë në React Router, duhet të krijoni një objekt historik duke përdorur metodën createHistory() nga paketa e historisë. Kjo do t'ju japë akses në metoda të tilla si push(), zëvendësoni() dhe go(). Këto metoda ju lejojnë të manipuloni URL-në e shfletuesit dhe të lundroni midis rrugëve të ndryshme në aplikacionin tuaj. Ju gjithashtu mund të përdorni metodën listen() për të dëgjuar ndryshimet në URL dhe për të përditësuar aplikacionin tuaj në përputhje me rrethanat.

Pasi të keni krijuar një objekt historik, mund ta kaloni atë në komponentin e ruterit tuaj kur e krijoni. Kjo do të lejojë React Router të mbajë gjurmët e të gjitha ndryshimeve të bëra nga përdoruesit dhe të përditësojë në përputhje me rrethanat.

Përdorimi i historisë me React Router e bën më të lehtë për zhvilluesit të krijojnë komponentë të fuqishëm navigimi që janë të lehtë për përdoruesit për t'i kuptuar dhe ndërvepruar.