Inkinga enkulu ehlobene nokulayishwa kokuvilapha kwe-React Router ukuthi kungabangela izinkinga zokusebenza uma kungenziwanga kahle. Ukulayisha okuvilaphayo kungakhuphula isikhathi sokuqala sokulayisha ikhasi, njengoba ikhodi yengxenye ngayinye idinga ukulayishwa ngokwehlukana. Ukwengeza, uma ingxenye ingasetshenziswa njalo, ingase ingalayishi nhlobo, okuholela ekumoshweni kwezinsiza. Okokugcina, kunezinkinga ezingase zihambisane neziphequluli ezindala ezingakusekeli ukulayisha okuvilaphayo.
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. ngenisa i-React, { Suspense } kusuka 'kusabela';
// Lo mugqa ungenisa ngaphandle umtapo wezincwadi we-React kanye nengxenye ye-Suspense kumtapo wezincwadi we-React.
2. ngenisa i-{ BrowserRouter as Router, Route, Switch } isuka 'ku-react-router-dom';
// Lo mugqa ungenisa kwamanye amazwe izingxenye ze-BrowserRouter, Umzila kanye no-Shintsha kumtapo wezincwadi we-react-router-dom.
3. const Ikhaya = React.lazy(() => import('./Home'));
// Lo mugqa udala okungaguquki okubizwa ngokuthi Ikhaya esebenzisa isici esivilaphayo sokulayisha se-React ukuze ungenise ngokushintshayo ingxenye ebizwa ngokuthi Ikhaya isuka kufayela elikuhla lwemibhalo olufana naleli fayela (ingxenye Yohlelo Lokusebenza).
4. const Mayelana = React.lazy(() => import('./Mayelana'));
// Lo mugqa udala okubizwa njalo okubizwa nge-About esebenzisa ukulayisha okuvilaphayo ukuze ungenise ngokushintshayo ingxenye ebizwa nge-About isuka kufayela elikuhla lwemibhalo olufanayo naleli fayela (ingxenye yohlelo lokusebenza).
const Contact = React.lazy(() => import('./Contact')); // Lo mugqa udala okuthintwa njalo okubizwa ngokuthi Oxhumana naye osebenzisa ukulayisha okuvilaphayo ukuze angenise ngokushintshayo ingxenye ebizwa ngokuthi Othintana naye efayelini elikuhla lwemibhalo olufana naleli fayela (ingxenye Yohlelo Lokusebenza).
5. uhlelo lokusebenza () { buyisela ( // Lona umsebenzi womcibisholo obuyisela ikhodi ye-JSX esongwe ngomaka womzila ongeniswe ngaphambi kwesikhathi
6.Iyalayisha ...
}> //Le thegi ye-Suspense igoqa yonke imizila yethu nge-fallback props of Loading... uma noma yimuphi umzila uthatha isikhathi ukulayisha
7. //Shintsha umaka uzoqinisekisa ukuthi umzila owodwa kuphela onikezwa ngesikhathi esisodwa
8. //Lo Mzila uzonikeza Ingxenye Yasekhaya lapho umzila oqondile othi “/” ufaniswe
9. //Lo Mzila uzokwenza ukuthi Mayelana Nengxenye lapho indlela ethi "/mayelana" ifaniswe
10. //Lo Mzila uzonikeza Ingxenye Yokuxhumana lapho indlela ethi “/contact” ifaniswe ) } Thekelisa uhlelo lokusebenza oluzenzakalelayo; // Ekugcineni sivala wonke amathegi futhi sikhiphe uhlelo lwethu lokusebenza
Inkinga yokulayisha ivila
Ukulayisha okuvilaphayo kuyindlela esetshenziselwa ukubambezela ukulayishwa kwezingxenye ezithile kuze kube yilapho sezidingeka. Lokhu kungasiza ukuthuthukisa ukusebenza kohlelo lokusebenza ngokulayisha kuphela okudingekayo nganoma yisiphi isikhathi. Nokho, lokhu kungaba yinkinga uma usebenzisa i-React Router, ngoba ayikusekeli ukulayisha okuvilaphayo ngaphandle kwebhokisi. Ukuze kuxazululwe le nkinga, onjiniyela kufanele balungiselele mathupha imizila yabo ukuze bavumele ukulayisha okuvilaphayo. Lokhu kungabandakanya ukusetha ukungenisa okunamandla nokuhlukanisa amakhodi, okungaba imisebenzi eyinkimbinkimbi futhi edla isikhathi. Ukwengeza, eminye imitapo yolwazi efana ne-React Loadable ingase idinge ukusetshenziswa ukuze kusetshenziswe kahle ukulayisha okuvilaphayo nge-React Router.
Yini i-React lazy load
I-React lazy load isici se-React Router esivumela ukulayishwa kwezingxenye uma kudingeka. Lokhu kusho ukuthi esikhundleni sokulayisha zonke izingxenye ngesikhathi esisodwa, izingxenye ezidingekayo kuphela ezilayishwayo uma kudingeka. Lokhu kusiza ukunciphisa isikhathi sokulayisha ikhasi lokuqala nokuthuthukisa ukusebenza. Iphinde ivumele ukuhlelwa okungcono kwekhodi nokuhlukaniswa kokukhathazeka, njengoba ingxenye ngayinye ingalayishwa ngokuzimela.
Ngiyisebenzisa kanjani i-React lazy kumzila wami
I-React lazy isici se-React esikuvumela ukuthi ungenise izingxenye eziguqukayo. Lokhu kusho ukuthi esikhundleni sokulayisha zonke izakhi ngaphambili, ungazilayisha njengoba kudingeka. Lokhu kungaba usizo ekuthuthukiseni ukusebenza ezinhlelweni ezinkulu.
Ukuze usebenzise i-React lazy kumzila wakho ku-React Router, udinga ukugoqa ingxenye ofuna ukuyilayisha ngokuvilapha ocingweni lokungenisa oluguqukayo. Ngokwesibonelo:
const MyComponent = React.lazy(() => import('./MyComponent'));
Bese, lapho uchaza imizila yakho, mane udlule ingxenye ye-MyComponent engxenyeni yomzila kanje:
Lokhu kuzobangela i-React Router ukuthi ilayishe ngokushintshashintshayo ingxenye ye-MyComponent lapho izulazulela kulowo mzila.
