Suurin ongelma, joka liittyy tietojen välittämiseen react-reitittimen historiassa, on se, että tietoja ei säilytetä sivun päivityksen aikana. Kun käyttäjä päivittää sivun, historia.push-tiedostoon tallennetut tiedot menetetään, eivätkä ne ole käytettävissä myöhemmissä sivulatauksissa. Tämä voi johtaa odottamattomaan toimintaan ja voi aiheuttaa ongelmia yritettäessä käyttää tai tallentaa tietoja edellisestä sivulatauksesta.
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. Tämä rivi tuo useHistory-koukun react-router-dom-kirjastosta, joka tarjoaa pääsyn historiaobjektiin, joka seuraa nykyistä sijaintia sovelluksessa.
2. Tämä rivi ilmoittaa toiminnallisen komponentin nimeltä MyComponent ja määrittää sen vakiomuuttujalle.
3. Tämä rivi käyttää rivillä 1 tuotua useHistory-koukkua päästäkseen historiaobjektiin ja määrittääkseen sen vakiomuuttujaan nimeltä historia.
4. Tämä rivi ilmoittaa handelClick-nimisen funktion, joka ottaa argumentin nimeltä data ja työntää polunnimen ja tilan ominaisuudet sisältävän objektin historiapinoon komennolla history.push().
5. Tämä rivi palauttaa painikeelementin, jossa on onClick-tapahtumakäsittelijä, joka kutsuu handleClick()-funktiota objektin, joka sisältää argumenttina someData, kun käyttäjä napsauttaa sitä.
Historian työntö
History push in React Router on menetelmä, jolla muutetaan ohjelmallisesti URL-osoite selaimessa aiheuttamatta sivun päivitystä. Sen avulla kehittäjät voivat luoda yksisivuisia sovelluksia, jotka silti pystyvät käsittelemään navigointia ja täsmälinkkejä. History push toimii käyttämällä selaimen historiasovellusliittymää, jonka avulla kehittäjät voivat muokata nykyistä URL-osoitetta lataamatta sivua uudelleen. Tämän ansiosta käyttäjät voivat navigoida sovelluksen eri sivujen välillä ilman, että niitä tarvitsee ladata joka kerta uudelleen. Lisäksi sitä voidaan käyttää syvälinkitykseen, jolloin käyttäjät voivat linkittää suoraan sovelluksen tiettyihin osiin.
Kuinka käytän historiaa react-reitittimessä
React Router tarjoaa tavan käyttää historiaa React-sovelluksissasi. Historian avulla voit seurata nykyistä sivua sekä kaikkia aiempia sivuja, joilla on vieraillut. Tästä on hyötyä navigoinnin luomisessa ja käyttäjän toimien seuraamisessa.
Jotta voit käyttää historiaa React Routerissa, sinun on luotava historiaobjekti käyttämällä createHistory()-menetelmää historiapaketista. Tämä antaa sinulle pääsyn menetelmiin, kuten push(), korvaa() ja go(). Näiden menetelmien avulla voit muokata selaimen URL-osoitetta ja navigoida sovelluksesi eri reittien välillä. Voit myös käyttää listen()-menetelmää kuunnellaksesi URL-osoitteen muutoksia ja päivittääksesi sovelluksesi niiden mukaisesti.
Kun olet luonut historiaobjektin, voit siirtää sen reititinkomponenttiin luodessasi sitä. Näin React Router voi seurata kaikkia käyttäjien tekemiä muutoksia ja päivittää niitä vastaavasti.
Historian käyttäminen React Routerin kanssa tekee kehittäjien helpommaksi luoda tehokkaita navigointikomponentteja, joita käyttäjien on helppo ymmärtää ja joiden kanssa on helppo olla vuorovaikutuksessa.
