Dhibaatada ugu weyn ee la xiriirta shakiga caajiska ah ee React Router v6 waa in aysan wali si buuxda u taageerin dhammaan daalacashada. Tani waxay ka dhigan tahay in isticmaalayaashu ay la kulmi karaan arrimo marka ay isku dayayaan inay galaan boggag gaar ah ama sifooyinka shabakadaha iyagoo isticmaalaya React Router v6 suspense caajisnimo. Intaa waxaa dheer, waxaa weli jira qaar ka mid ah cayayaanka iyo arrimaha waxqabadka oo u baahan in wax laga qabto ka hor inta aan loo isticmaalin goobaha wax soo saarka. Ugu dambayntii, API-ga qaybaha rarka caajiska ah ee leh Suspense ayaa wali ku jira marxaladaheedii hore waxaana laga yaabaa inay u baahdaan wakhti horumarineed oo dheeri ah si loo hubiyo ku habboonaanta codsiyada jira.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function AppRouter() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
export default AppRouter;
1. Koodhkani waxa uu soo dejiyaa maktabadda React, iyo sidoo kale qaybta Suspense ee React, iyo BrowserRouter, Route, iyo qaybaha beddelka ee react-router-dom.
2. Kadib waxay qeexaysaa saddex qaybood (Home, About, Contact) iyada oo la adeegsanayo habka rarista caajisnimada ee React si ay uga soo dejiso faylalkooda.
3. Shaqada AppRouter waxa lagu qeexaa ka soo celisa qayb ka mid ah Router-ka oo ay ku jiraan qayb Suspense ah oo ay ku dhex jirto qayb Switch ah.
4. Waxa ku dhex jira qaybta loo yaqaan 'Switch' waa saddex qaybood oo Route-ka ah oo mid kastaa ka dhigayo mid ka mid ah qaybaha la soo dejiyay marka ay jidadkooda ku habboon yihiin URL-ka (tusaale, '/' ee Guriga).
5. Ugu dambeyntii, AppRouter waa la dhoofiyaa si loogu isticmaalo meelo kale oo codsiga ah.
Sidee u isticmaashaa rarista caajiska ah ee react router v6
v6
Culayska caajiska ahi waa farsamo loo isticmaalo in dib loo dhigo rarista qaybaha qaarkood ilaa inta looga baahan yahay. Gudaha React Router v6, culeyska caajiska ah waxaa lagu gaari karaa iyadoo la adeegsanayo soo dejinta firfircoon () syntax. Syntax-kani waxa uu kuu ogolaanayaa inaad u kala qaybiso koodkaaga xidhmooyin badan oo markaas lagu shuban karo baahi ama isbarbar. Tani waxay kaa caawinaysaa yaraynta cabbirka xidhmada hore iyo horumarinta waxqabadka. Si aad u isticmaasho rarka caajiska ah ee React Router v6, waa inaad ku duubtaa qaybta aad rabto inaad culayska caajisto ee soo dejinta firfircoon () wac. Wicitaanka () soo dejinta ayaa soo celin doona ballan kaas oo xallin doona marka qaybta la raro oo diyaar u ah in la sameeyo.
Waa maxay shakiga iyo caajisnimada falcelinta
Suspense in React Router waa dariiqa dib loogu dhigi karo rarka dariiqa ilaa laga gaarayo shuruudo. Tan waxa loo isticmaali karaa in lagu horumariyo waxqabadka codsiga iyada oo la shubayo kaliya wadooyinka marka loo baahdo. Tusaale ahaan, haddii isticmaale uu u socdo bog u baahan xaqiijin, dariiqa dib ayaa loo dhigi karaa ilaa xaqiijinta la dhammeeyo.
Ku rarista caajiska ah ee React Router waxay u ogolaataa qaybaha in si isku mid ah loogu shubo marka loo baahdo halkii mar la wada rari lahaa. Tani waxay wanaajisaa waxqabadka iyada oo la saarayo kaliya qaybaha marka loo baahdo waxayna yaraynaysaa tirada xogta loo baahan yahay in lagu wareejiyo shabakada. Soo dejinta caajisku waxa kale oo ay caawisaa kala qaybinta koodka, taas oo u oggolaanaysa codsiyada waaweyn in loo jajabiyo qaybo yaryar oo lagu shuban karo baahida.
