Dhibaatada ugu weyn ee la xiriirta gudbinta xogta taariikhda falcelinta router-ka, riixi waa in xogta aan lagu sii hayn bogag cusub oo cusub. Marka isticmaaluhu dib u cusbooneysiiyo bogga, xogta lagu kaydiyay History.push waa la lumin doonaa oo loo heli maayo isticmaalka bogga xiga. Tani waxay u horseedi kartaa dabeecad aan la filayn waxayna sababi kartaa arrimo marka la isku dayayo in la galo ama lagu kaydiyo xogta boggii hore.
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. Khadkani waxa uu ka keenayaa isticmaalkaHistory hook ka maktabadda react-router-dom, kaas oo siiya marin u helka shayga taariikhda ee ilaalinaya meesha hadda ee app-ka.
2. Xariiqdani waxay ku dhawaaqaysaa qayb shaqaynaysa oo loo yaqaan MyComponent waxayna ku meelaysaa doorsoome joogto ah.
3. Xariiqdani waxa ay adeegsataa qabka taariikhda la soo geliyo safka 1aad si loo galo shayga taariikhda oo loogu meeleeyo doorsoome joogto ah oo loo yaqaan taariikhda.
4. Sadarkani waxa uu ku dhawaaqayaa hawl loo yaqaan handleClick oo qaadata dood la yidhaa xog oo ku riixaysa shay ay ku jiraan magac-raac iyo hanti dawladeed oo ku dhejinaya kaydka taariikhda iyada oo la isticmaalayo History.push().
5. Xariiqdani waxa ay soo celinaysaa qayb badhanka leh oo leh maamulaha dhacdada onClick kaas oo ugu yeedhaya handleClick() shay ay ku jiraan xogaha qaarkood sida dooddiisa marka isticmaaluhu gujiyo.
Taariikhda riix
Taariikhda riixitaanka React Router waa hab loo isticmaalo in barnaamij ahaan loogu beddelo URL browserka iyada oo aan la keenin bog cusub. Waxay u ogolaataa horumariyeyaasha inay abuuraan codsiyo hal bog ah oo weli awood u leh inay xakameeyaan navigation iyo isku xirka qoto dheer. Soo riixista taariikhda waxay ku shaqeysaa iyadoo la adeegsanayo taariikhda browserka API, taasoo u oggolaanaysa horumariyeyaasha inay maamulaan URL-ka hadda jira iyagoon dib u soo dejin bogga. Tani waxay suurtogal ka dhigaysaa isticmaalayaasha inay dhex maraan boggag kala duwan ee codsiga iyaga oo aan dib u soo gelin mar kasta. Intaa waxaa dheer, waxaa loo isticmaali karaa isku xirka qoto dheer, taasoo u oggolaanaysa isticmaalayaasha inay si toos ah ugu xidhaan qaybo gaar ah oo codsiga ah.
Sideen u isticmaalaa taariikhda routerka falcelinta
React Router waxa ay ku siinaysaa hab aad taariikhda ugu isticmaasho codsiyadaada React. Taariikhdu waxay kuu ogolaanaysaa inaad la socoto bogga hadda jira, iyo sidoo kale bogaggii hore ee la booqday. Tani waxay faa'iido u leedahay abuurista navigation iyo la socoshada falalka isticmaalaha.
Si aad taariikhda ugu isticmaasho React Router, waxaad u baahan tahay inaad abuurto shay taariikheed adoo isticmaalaya habka CreateHistory() ee xirmada taariikhda. Tani waxay ku siin doontaa helitaanka hababka ay ka mid yihiin riix(), bedeli (), iyo go(). Hababkani waxay kuu oggolaanayaan inaad wax ka beddesho URL-ka browserka oo aad dhex marato dariiqyada kala duwan ee codsigaaga. Waxa kale oo aad isticmaali kartaa habka dhegeysiga () si aad u dhageysato isbeddellada URL-ka oo aad u cusbooneysiiso codsigaaga si waafaqsan.
Markaad abuurto shay taariikhi ah, waxaad u gudbin kartaa qaybta routerkaaga markaad abuurayso. Tani waxay u oggolaan doontaa React Router inuu la socdo dhammaan isbeddellada ay sameeyeen isticmaalayaashu oo u cusbooneysiiyaan si waafaqsan.
Isticmaalka taariikhda React Router waxay u sahlaysaa horumariyayaashu inay abuuraan qaybo hagitaan oo awood leh oo u fudud isticmaalayaashu inay fahmaan oo ay la falgalaan.
