Il-problema ewlenija relatata mal-mogħdija tad-dejta fl-istorja tar-reazzjoni tar-router, push hija li d-dejta ma tippersistix tul l-aġġornamenti tal-paġna. Meta utent jġedded il-paġna, id-dejta maħżuna f' history.push tintilef u ma tkunx disponibbli għall-użu fuq tagħbijiet ta 'paġni sussegwenti. Dan jista 'jwassal għal imġieba mhux mistennija u jista' jikkawża problemi meta tipprova taċċessa jew taħżen dejta minn tagħbija ta 'paġna preċedenti.
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. Din il-linja timporta l-ganċ useHistory mil-librerija react-router-dom, li tipprovdi aċċess għall-oġġett tal-istorja li jżomm rekord tal-post kurrenti fl-app.
2. Din il-linja tiddikjara komponent funzjonali msejjaħ MyComponent u tassenjah għal varjabbli kostanti.
3. Din il-linja tuża l-ganċ useHistory importat fil-linja 1 biex tikseb aċċess għall-oġġett tal-istorja u tassenjaha għal varjabbli kostanti msejħa storja.
4. Din il-linja tiddikjara funzjoni msejħa handleClick li tieħu argument imsejjaħ data u timbotta oġġett li fih pathname u proprjetajiet tal-istat fuq il-munzell tal-istorja bl-użu history.push().
5. Din il-linja tirritorna element buttuna b'onClick event handler li jsejjaħ handleClick() b'oġġett li fih someData bħala l-argument tiegħu meta kklikkjat minn utent.
Storja push
Storja push in React Router huwa metodu użat biex jibdel b'mod programmatiku l-URL fil-browser mingħajr ma jikkawża aġġornament tal-paġna. Jippermetti lill-iżviluppaturi joħolqu applikazzjonijiet b'paġna waħda li għadhom kapaċi jimmaniġġjaw in-navigazzjoni u l-linking fil-fond. L-ispinta tal-istorja taħdem billi tuża l-API tal-istorja tal-browser, li tippermetti lill-iżviluppaturi jimmanipulaw il-URL attwali mingħajr ma jerġgħu jtellgħu l-paġna. Dan jagħmilha possibbli għall-utenti li jinnavigaw bejn paġni differenti ta 'applikazzjoni mingħajr ma jkollhom għalfejn jerġgħu jtellgħu kull darba. Barra minn hekk, jista 'jintuża għal deep linking, li jippermetti lill-utenti jgħaqqdu direttament f'partijiet speċifiċi ta' applikazzjoni.
Kif nuża l-istorja fir-reazzjoni router
React Router jipprovdi mod kif tuża l-istorja fl-applikazzjonijiet React tiegħek. L-istorja tippermettilek iżżomm rekord tal-paġna attwali, kif ukoll ta 'kwalunkwe paġni preċedenti li jkunu ġew miżjura. Dan huwa utli għall-ħolqien tan-navigazzjoni u jżommu rekord tal-azzjonijiet tal-utent.
Biex tuża l-istorja f'React Router, trid toħloq oġġett tal-istorja billi tuża l-metodu createHistory() mill-pakkett tal-istorja. Dan jagħtik aċċess għal metodi bħal push(), replace(), u go(). Dawn il-metodi jippermettulek timmanipula l-URL tal-browser u tinnaviga bejn rotot differenti fl-applikazzjoni tiegħek. Tista' wkoll tuża l-metodu listen() biex tisma' għal bidliet fil-URL u taġġorna l-applikazzjoni tiegħek kif xieraq.
Ladarba tkun ħloqt oġġett tal-istorja, tista 'tgħaddih fil-komponent tar-router tiegħek meta toħloqha. Dan se jippermetti lil React Router li jżomm rekord tal-bidliet kollha magħmula mill-utenti u jaġġorna kif xieraq.
L-użu tal-istorja ma' React Router jagħmilha aktar faċli għall-iżviluppaturi biex joħolqu komponenti ta' navigazzjoni b'saħħithom li huma faċli biex l-utenti jifhmu u jinteraġixxu magħhom.
