Ang pangunahing problema na nauugnay sa pagpasa ng data sa kasaysayan ng react router, itulak ay ang data ay hindi nagpapatuloy sa mga pag-refresh ng pahina. Kapag ni-refresh ng user ang page, mawawala ang data na nakaimbak sa history.push at hindi magagamit sa mga susunod na pag-load ng page. Maaari itong humantong sa hindi inaasahang gawi at maaaring magdulot ng mga isyu kapag sinusubukang i-access o iimbak ang data mula sa isang nakaraang pag-load ng page.
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. Ini-import ng linyang ito ang useHistory hook mula sa react-router-dom library, na nagbibigay ng access sa history object na sumusubaybay sa kasalukuyang lokasyon sa app.
2. Ang linyang ito ay nagdedeklara ng functional component na tinatawag na MyComponent at itinatalaga ito sa isang pare-parehong variable.
3. Ginagamit ng linyang ito ang useHistory hook na na-import sa linya 1 para makakuha ng access sa history object at italaga ito sa isang pare-parehong variable na tinatawag na history.
4. Ang linyang ito ay nagdedeklara ng function na tinatawag na handleClick na kumukuha ng argument na tinatawag na data at nagtutulak ng object na naglalaman ng pathname at state properties papunta sa history stack gamit ang history.push().
5. Ang linyang ito ay nagbabalik ng elemento ng button na may onClick event handler na tumatawag sa handleClick() na may object na naglalaman ng someData bilang argument nito kapag na-click ng isang user.
Tulak ng kasaysayan
Ang history push sa React Router ay isang paraan na ginagamit upang mabago ang URL sa browser nang hindi nagiging sanhi ng pag-refresh ng page. Nagbibigay-daan ito sa mga developer na lumikha ng mga single-page na application na nakakayanan pa rin ang pag-navigate at deep linking. Gumagana ang history push sa pamamagitan ng paggamit ng history API ng browser, na nagpapahintulot sa mga developer na manipulahin ang kasalukuyang URL nang hindi nire-reload ang page. Ginagawa nitong posible para sa mga gumagamit na mag-navigate sa pagitan ng iba't ibang mga pahina ng isang application nang hindi kinakailangang mag-reload sa bawat oras. Bukod pa rito, maaari itong gamitin para sa malalim na pag-link, na nagpapahintulot sa mga user na direktang mag-link sa mga partikular na bahagi ng isang application.
Paano ko gagamitin ang history sa react router
Nagbibigay ang React Router ng paraan para magamit ang history sa iyong mga application ng React. Binibigyang-daan ka ng kasaysayan na subaybayan ang kasalukuyang pahina, gayundin ang anumang mga nakaraang pahina na binisita. Ito ay kapaki-pakinabang para sa paglikha ng nabigasyon at pagsubaybay sa mga aksyon ng user.
Para magamit ang history sa React Router, kailangan mong gumawa ng history object gamit ang createHistory() method mula sa history package. Bibigyan ka nito ng access sa mga pamamaraan tulad ng push(), replace(), at go(). Binibigyang-daan ka ng mga paraang ito na manipulahin ang URL ng browser at mag-navigate sa pagitan ng iba't ibang ruta sa iyong application. Maaari mo ring gamitin ang listen() na paraan upang makinig sa mga pagbabago sa URL at i-update ang iyong application nang naaayon.
Kapag nakagawa ka na ng history object, maipapasa mo ito sa iyong bahagi ng router kapag nililikha ito. Papayagan nito ang React Router na subaybayan ang lahat ng mga pagbabagong ginawa ng mga user at mag-update nang naaayon.
Ang paggamit ng history sa React Router ay nagpapadali para sa mga developer na lumikha ng mga mahuhusay na bahagi ng nabigasyon na madaling maunawaan at makipag-ugnayan ng mga user.
