La xaliyay: ku jiheeyaha react router v6

Dhibaatada ugu weyn ee la xiriirta dib u habeynta React Router v6 waa in qaybtu aysan dib u soo celin marka dib-u-habeyntu dhacdo. Tani waxay ka dhigan tahay in gobol kasta ama qalab kasta oo la xidhiidha qaybta aan la cusboonaysiin doonin marka dib-u-dejintu dhacdo, iyo isbeddel kasta oo lagu sameeyo qiyamkaas aan ka muuqan doonin bogga cusub. Intaa waxaa dheer, maadaama React Router v6 uusan taageerin xargaha weydiinta, cabiraad kasta oo weydiinta lagu gudbiyo URL-ka sidoo kale waa la lumin doonaa inta lagu jiro dib u habeynta.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. Khadkani waxa uu ka keenayaa qaybta Redirect maktabadda react-router-dom.

2. Khadkani waxa uu ka dhigayaa qayb dib-u-directed, kaas oo u wareejin doona isticmaalaha jidka "/guriga".

Sideen ugu jiheeyaa React Router v6

v6

React Router v6 wuxuu bixiyaa qayb cusub oo la yiraahdo taas oo loo isticmaali karo in dadka isticmaala hal bog loo wareejiyo bog kale. Si aad u isticmaasho, waxaad si fudud u baahan tahay inaad ka soo dejiso qaybta Redirect ee xirmada react-router-dom ka bacdina u isticmaal qaabaynta jidkaaga. Marka isticmaaluhu uu booqdo dariiqa lagu cayimay 'laga soo bilaabo' prop, waxaa loo wareejin doonaa dariiqa lagu cayimay 'to' prop. Tusaale ahaan:

ka soo dejinta {Diiwaangeli} ka 'react-router-dom';
} />

Sideen u jiheeyaa react router v6 ka dib marka la soo galo

Jihaynta ka dib galitaanka guusha leh waa sifo caan ah oo ku jirta arjiyada shabakadda. Gudaha React Router v6, waxaad isticmaali kartaa qayb si dib loogu hagayo isticmaalaha kadib galitaanka guusha leh.

Si tan loo sameeyo, waxaad u baahan doontaa inaad abuurto waddo hubinaysa haddii isticmaaluhu uu soo galay ka dibna u jiheeyo si waafaqsan. Tusaale ahaan:

{
haddii (isLoggedIn) {
soo laabtay ;
} kale {
soo laabtay ;
}
}} />

Tusaalahan, waxaanu ku hubinaynaa haddii isticmaaluhu uu soo galay ka dibna ama samaynta qaybta LoginPage ama u wareejinta /dashboardka. Waxa kale oo aad u gudbin kartaa agabka qaybta Redirect sida: Tani waxay kuu ogolaaneysaa inaad la socoto halka isticmaaluhu uu ahaa ka hor inta aan la jihaynin.

Sideen si toos ah u jiheeyaa falcelin ahaan

React Router waxa uu bixiyaa qayb Redirect ah oo loo isticmaali karo in si toos ah loo jiheeyo isticmaalayaasha marka shuruudaha qaarkood la buuxiyo. Si aad u isticmaashid, waa inaad martaa jidka aad rabto inaad u jiheyso sidii qalab. Waxa kale oo aad ku gudbi kartaa shay leh cabbir dawladeed iyo/ama weydiin haddii loo baahdo.

Si aad si toos ah u jiheyso, waxaad u baahan doontaa inaad isticmaashid qaybta ku jirta qaybta Jidka oo aad shuruud ku xidho marka ay dib u hagistu dhacdo. Tusaale ahaan, haddii aad rabtid inaad isticmaalayaasha ka wareejiso bogga guriga ee codsigaaga una wareejiso bogga gelitaanka ka dib markay gujiyaan isku-xiraha, waxaad samayn kartaa wax sidan oo kale ah:

{isLoggedIn ? : }

Tusaalahan, waxaan isticmaaleynaa doorsoomaha isLoggedIn boolean (kaas oo u baahan lahaa in lagu dejiyo meel kale) sida xaaladdeena marka aan sameyneyno dib u habeynta. Haddii ay run tahay, markaas waxaanu bixinaa qaybtayada Guriga; haddii kale, waxaan sameynaa dib u habeynta.

Sideed u jihaysaa ka dib 5 ilbiriqsi oo falcelin ah

Si aad u jihayso 5 ilbiriqsi ka dib gudaha React Router, waxaad isticmaali kartaa shaqada setTimeout() si aad ugu wacdo dariiqa history.push() oo leh dariiqa la rabo dood ahaan.

Tusaale:
ka soo dejin { useHistory} ka "react-router-dom";
taariikhda taariikhda = isticmaalka History ();
setTimeout(() => {
history.push("/Bogga dib loo hago");
}, 5000);