Rešeno: posredovanje podatkov v zgodovini odzivnega usmerjevalnika%2Cpush

Glavna težava v zvezi s podajanjem podatkov v zgodovini odzivnega usmerjevalnika, push je, da se podatki med osveževanjem strani ne ohranijo. Ko uporabnik osveži stran, bodo podatki, shranjeni v history.push, izgubljeni in ne bodo na voljo za uporabo pri nadaljnjih nalaganjih strani. To lahko privede do nepričakovanega vedenja in lahko povzroči težave pri poskusu dostopa ali shranjevanja podatkov iz prejšnjega nalaganja strani.

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. Ta vrstica uvozi kljuko useHistory iz knjižnice react-router-dom, ki omogoča dostop do predmeta zgodovine, ki spremlja trenutno lokacijo v aplikaciji.

2. Ta vrstica deklarira funkcionalno komponento, imenovano MyComponent, in jo dodeli konstantni spremenljivki.

3. Ta vrstica uporablja kavelj useHistory, uvožen v vrstici 1, da pridobi dostop do objekta zgodovine in ga dodeli konstantni spremenljivki, imenovani zgodovina.

4. Ta vrstica deklarira funkcijo, imenovano handleClick, ki sprejme argument, imenovan data, in potisne objekt, ki vsebuje ime poti in lastnosti stanja, na sklad zgodovine z uporabo history.push().

5. Ta vrstica vrne element gumba z obdelovalcem dogodka onClick, ki pokliče handleClick() z objektom, ki vsebuje someData kot svoj argument, ko klikne uporabnik.

Pritisk zgodovine

Potiskanje zgodovine v React Routerju je metoda, ki se uporablja za programsko spreminjanje URL-ja v brskalniku, ne da bi povzročilo osvežitev strani. Razvijalcem omogoča ustvarjanje enostranskih aplikacij, ki še vedno zmorejo upravljati z navigacijo in globokimi povezavami. History push deluje z uporabo API-ja za zgodovino brskalnika, ki razvijalcem omogoča, da manipulirajo s trenutnim URL-jem brez ponovnega nalaganja strani. To uporabnikom omogoča krmarjenje med različnimi stranmi aplikacije, ne da bi morali vsakič znova naložiti. Poleg tega se lahko uporablja za globoko povezovanje, kar uporabnikom omogoča neposredno povezovanje v določene dele aplikacije.

Kako uporabim zgodovino v usmerjevalniku React

React Router omogoča uporabo zgodovine v vaših aplikacijah React. Zgodovina vam omogoča, da spremljate trenutno stran in vse prejšnje strani, ki ste jih obiskali. To je uporabno za ustvarjanje navigacije in spremljanje uporabnikovih dejanj.

Za uporabo zgodovine v React Routerju morate ustvariti objekt zgodovine z uporabo metode createHistory() iz paketa zgodovine. To vam bo omogočilo dostop do metod, kot so push(), replace() in go(). Te metode vam omogočajo, da manipulirate z URL-jem brskalnika in krmarite med različnimi potmi v vaši aplikaciji. Uporabite lahko tudi metodo listen(), da poslušate spremembe v URL-ju in ustrezno posodobite svojo aplikacijo.

Ko ustvarite objekt zgodovine, ga lahko pri ustvarjanju posredujete komponenti usmerjevalnika. To bo React Routerju omogočilo, da spremlja vse spremembe, ki jih naredijo uporabniki, in jih ustrezno posodablja.

Uporaba zgodovine z React Router razvijalcem olajša ustvarjanje zmogljivih navigacijskih komponent, ki jih uporabniki zlahka razumejo in z njimi komunicirajo.

Podobni objav:

Pustite komentar