Dhibaatada ugu weyn ee la xiriirta React Router loading caajisnimo waa in ay sababi karto arrimaha waxqabadka haddii aan si sax ah loo hirgelin. Soo dejinta caajisku waxay kordhin kartaa wakhtiga rarida bogga hore, maadaama koodka qayb kasta uu u baahan yahay in si gaar ah loo raro. Intaa waxaa dheer, haddii qayb aan inta badan la isticmaalin, waxaa laga yaabaa inaan waligood la rarin, taasoo keenta kheyraad khasaaray. Ugu dambeyntii, waxaa jira arrimo la jaan qaadi kara daalacashada hore ee aan taageerin loading caajis ah.
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 App() {
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 App;
1. ka soo daji React, { Suspense } ka 'react';
// Khadkani waxa uu ka soo dejiyaa maktabadda React iyo qaybta Suspense ee maktabadda React.
2. ka soo daji {BrowserRouter sida Router, Route, Switch} ka 'react-router-dom';
// Khadkani waxa uu ka soo dejiyaa BrowserRouter, Jidka iyo qaybaha beddelka ee maktabadda react-router-dom.
3. const Home = React.lazy(() => soo dejinta ('./Home'));
// Khadkani waxa uu abuuraa guri joogto ah oo adeegsada habka rarista caajiska ah ee React si uu si firfircoon uga soo dejiyo qayb la yidhaa Home fayl ku jira tusaha faylkan (qaybta App).
4. const About = React.lazy(() => soo dejinta ('./About'));
// Khadkani waxa uu abuuraa mid joogto ah oo loo yaqaan About kaas oo isticmaala loading caajis ah si uu si firfircoon uga soo dejiyo qayb la yiraahdo About fayl ku jira tusaha faylkan (qaybta App).
Const Contact = React.lazy(() => soo dejinta ('./Contact')); // Khadkani waxa uu abuuraa xidhiidh joogto ah oo loo yaqaan Contact kaas oo adeegsada loading caajis ah si uu si firfircoon uga soo dejiyo qayb la yidhaa Contact ka fayl la mid ah tusaha faylkan (qaybta App).
5. function App () { soo celinta ( // Tani waa falaarta soo celisa koodka JSX oo ku duudduubay sumadda Router-ka kaas oo horay loo soo dejiyay
6.Dajinta ...
}> // Calaamaddan Suspense waxay ku duubtaa dhammaan dariiqyadayada soo-celinta dib-u-celinta
7. // Beddelka summada waxay hubin doontaa in hal waddo oo keliya la sameeyay hal mar
8. // Jidkani wuxuu soo saari doonaa Qaybta Guriga marka dariiqa saxda ah "/" la isku beego
9. // Jidkani waxa uu bixin doonaa About Component marka dariiqa "/ku saabsan" la isku beego
10. // Jidkani waxa uu soo saari doonaa Qaybta Xidhiidhka marka dariiqa "/xidhiidhka" la is waafajiyo ) } dhoofinta default App; //Ugu dambayntii waanu xidhnay dhammaan tags-yada oo dhoofinnaa abkayaga
Dhibaatada culeyska caajiska ah
Culayska caajiska ahi waa farsamo loo isticmaalo in dib loo dhigo rarista qaybaha qaarkood ilaa inta loo baahan yahay. Tani waxay gacan ka geysan kartaa hagaajinta waxqabadka arjiga iyada oo la soo shubayo kaliya waxa lagama maarmaanka u ah wakhti kasta. Si kastaba ha noqotee, tani waxay noqon kartaa dhibaato marka la isticmaalayo React Router, maadaama aysan taageereynin soo dejinta caajisnimada ee sanduuqa. Si arrintan looga shaqeeyo, horumariyayaashu waa inay gacanta ku habeeyaan jidadkooda si ay awood ugu yeeshaan rarka caajiska ah. Tani waxay ku lug yeelan kartaa dejinta soo dejinta firfircoon iyo kala qaybinta koodka, kuwaas oo noqon kara hawlo adag oo waqti badan qaata. Intaa waxaa dheer, maktabadaha qaarkood sida React Loadable ayaa laga yaabaa inay u baahdaan in la isticmaalo si si habboon loogu hirgeliyo rarista caajiska ah ee React Router.
Waa maxay React load caajis ah
Culayska caajiska ah ee ka falcelinta waa sifo ka mid ah React Router kaas oo u oggolaanaya rarista qaybaha baahida. Tani waxay ka dhigan tahay in halkii hal mar lagu shubi lahaa dhammaan qaybaha, kaliya qaybaha lagama maarmaanka ah ayaa la raray marka loo baahdo. Tani waxay gacan ka geysaneysaa in la yareeyo wakhtiga culeyska bogga hore iyo hagaajinta waxqabadka. Waxa kale oo ay ogolaataa habaynta kood ka wanaagsan iyo kala saarista walaacyada, maadaama qayb kasta si madax banaan loogu shuban karo.
Sideen u isticmaalaa React lazy on my router
Caajisnaanta falcelinta waa muuqaal React oo kuu oggolaanaya inaad si firfircoon u soo dejiso qaybaha. Tani waxay ka dhigan tahay in halkii aad ku shubi lahayd dhammaan qaybaha hore, waxaad ku shuban kartaa hadba sida loogu baahdo. Tani waxay faa'iido u yeelan kartaa hagaajinta waxqabadka codsiyada waaweyn.
Si aad u isticmaasho caajiska React ee router kaaga React Router, waxaad u baahan tahay inaad ku duubto qaybta aad rabto inaad caajiska ku shubto wicitaan soo dejineed firfircoon. Tusaale ahaan:
const MyComponent = React.lazy(() => soo dejin ('./MyComponent'));
Kadib, markaad qeexayso waddooyinkaaga, si fudud u gudbi qaybta MyComponent ee qaybta Jidka sida:
Tani waxay sababi doontaa React Router inuu si firfircooni leh u rarto qaybta MyComponent marka aad u socoto jidkaas.
