Hovedproblemet knyttet til overføring av data i react router historie, push er at dataene ikke vedvares på tvers av sideoppdateringer. Når en bruker oppdaterer siden, vil dataene som er lagret i history.push gå tapt og vil ikke være tilgjengelige for bruk ved påfølgende sideinnlastinger. Dette kan føre til uventet oppførsel og kan forårsake problemer når du prøver å få tilgang til eller lagre data fra en tidligere sideinnlasting.
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. Denne linjen importerer useHistory-kroken fra react-router-dom-biblioteket, som gir tilgang til historieobjektet som holder styr på gjeldende plassering i appen.
2. Denne linjen erklærer en funksjonell komponent kalt MyComponent og tilordner den til en konstant variabel.
3. Denne linjen bruker useHistory-kroken importert i linje 1 for å få tilgang til historieobjektet og tilordne det til en konstant variabel kalt historie.
4. Denne linjen erklærer en funksjon kalt handleClick som tar et argument kalt data og skyver et objekt som inneholder banenavn og tilstandsegenskaper til historiestabelen ved å bruke history.push().
5. Denne linjen returnerer et knappelement med en onClick hendelsesbehandler som kaller handleClick() med et objekt som inneholder someData som argument når det klikkes av en bruker.
Historie push
History push i React Router er en metode som brukes til å programmatisk endre URL-en i nettleseren uten å forårsake en sideoppdatering. Det lar utviklere lage enkeltsideapplikasjoner som fortsatt er i stand til å håndtere navigering og dypkoblinger. History push fungerer ved å bruke nettleserens historie API, som lar utviklere manipulere gjeldende URL uten å laste inn siden på nytt. Dette gjør det mulig for brukere å navigere mellom ulike sider i en applikasjon uten å måtte laste inn på nytt hver gang. I tillegg kan den brukes til dyplenking, slik at brukere kan koble direkte til bestemte deler av en applikasjon.
Hvordan bruker jeg historikk i react router
React Router gir deg en måte å bruke historikken i dine React-applikasjoner. Historikk lar deg holde oversikt over gjeldende side, samt eventuelle tidligere sider som har blitt besøkt. Dette er nyttig for å lage navigasjon og holde styr på brukerhandlinger.
For å bruke historikk i React Router, må du lage et historikkobjekt ved å bruke createHistory()-metoden fra historikkpakken. Dette vil gi deg tilgang til metoder som push(), replace() og go(). Disse metodene lar deg manipulere nettleserens URL og navigere mellom ulike ruter i applikasjonen din. Du kan også bruke listen()-metoden for å lytte etter endringer i URL-en og oppdatere applikasjonen din deretter.
Når du har opprettet et historikkobjekt, kan du sende det inn i ruterkomponenten når du oppretter det. Dette vil tillate React Router å holde styr på alle endringer gjort av brukere og oppdatere deretter.
Å bruke historikk med React Router gjør det enklere for utviklere å lage kraftige navigasjonskomponenter som er enkle for brukere å forstå og samhandle med.
