Ingxaki ephambili enxulumene neReact Router yokulayisha ukonqena kukuba inokubangela imiba yokusebenza ukuba ayiphunyezwanga ngokuchanekileyo. Ukulayishwa kobuvila kunokunyusa ixesha lokuqala lokulayisha iphepha, njengoko ikhowudi yecandelo ngalinye kufuneka ilayishwe ngokwahlukileyo. Ukongeza, ukuba icandelo alisetyenziswa rhoqo, lisenokungaze lilayishwe konke konke, nto leyo ekhokelela kwinkcitho yemithombo. Okokugqibela, kukho imiba enokuhambelana neziphequluli ezindala ezingakuxhasi ukulayishwa kobuvila.
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 } ukusuka 'kusabela';
// Lo mgca ungenisa ngaphandle ilayibrari ye-React kunye necandelo le-Suspense kwithala leencwadi le-React.
2. ngenisa ngaphandle {IbrowserRouter njengeNdlela, iNdlela, Tshintshela} ukusuka 'kwi-react-router-dom';
// Lo mgca ungenisa i-BrowserRouter, iNdlela kunye noTshintsho kwilayibrari ye-react-router-dom.
3. const Ekhaya = React.lazy(() => import('./Home'));
// Lo mgca wenza into engaguqukiyo ebizwa ngokuba yiKhaya esebenzisa uphawu lokulayisha oluyonqenayo lwe-React ukungenisa ngamandla inxalenye ebizwa ngokuba yiKhaya kwifayile ekuluhlu olufanayo nale fayile (icandelo le-App).
4. const Malunga = React.lazy(() => import('./Malunga'));
// Lo mgca udala into eqhubekayo ebizwa ngokuba yi-About esebenzisa ukulayisha ukonqena ukungenisa ngokuguqukayo inxalenye ebizwa ngokuba yi-About ukusuka kwifayile kulawulo olufanayo nale fayile (icandelo le-App).
const Qhagamshelana = React.lazy(() => import('./Contact')); // Lo mgca udala uQhagamshelwano oluqhubekayo olusebenzisa ukulayisha ukonqena ukungenisa ngokuguqukayo icandelo elibizwa ngokuba nguQhagamshelwano ukusuka kwifayile kulawulo olufanayo nale fayile (icandelo le-App).
5. umsebenzi App () { buyisela ( // Lo ngumsebenzi wotolo obuyisela ikhowudi ye-JSX esongelwe kwithegi ye-Router ethathwe ngaphandle ngaphambili
6.Ukulayisha ...
}> //Le thegi ye-Suspense isonga zonke iindlela zethu ngepropu ezibuyela umva zokuLayisha... ukuba nayiphi na indlela ithatha ixesha ukulayisha
7. //Tshintsha ithegi iya kuqinisekisa ukuba yindlela enye kuphela enikezelwayo kanye
8. //Le Ndlela iyakwenza iCandelo laseKhaya xa indlela echanekileyo "/" ihambelana
9. // Le Ndlela iyakwenza malunga neCandelo xa umendo "/ malunga" uhambelana
10. //Le Ndlela iyakwenza iCandelo loQhagamshelwano xa umendo “/umfowunelwa” ufaniswe ) } thumela iApp engagqibekanga; // Ekugqibeleni sivala zonke iithegi kwaye sithumele ngaphandle usetyenziso lwethu
Ingxaki yomthwalo wevila
Ukulayishwa kobuvila bubuchule obusetyenziselwa ukulibazisa ukulayishwa kwamalungu athile de abe afuneka. Oku kunokunceda ukuphucula ukusebenza kwesicelo ngokulayisha kuphela oko kuyimfuneko nangaliphi na ixesha. Nangona kunjalo, oku kunokuba yingxaki xa usebenzisa i-React Router, njengoko ingakuxhasi ukulayishwa kobuvila ngaphandle kwebhokisi. Ukusebenza malunga nalo mba, abaphuhlisi kufuneka baqwalasele iindlela zabo ngokwenza ukulayisha okonqena. Oku kunokubandakanya ukuseta ukungenisa elizweni okuguquguqukayo kunye nokwahlulahlula ikhowudi, enokuba nzima kunye nemisebenzi echitha ixesha. Ukongeza, amanye amathala eencwadi afana neReact Loadable anokufuneka ukuba asetyenziswe ukuze kuphunyezwe ngokufanelekileyo ukulayisha ngeReact Router.
Yintoni React umthwalo ukonqena
Umthwalo wokonqena iReact luphawu lweReact Router evumela ukulayishwa kwamacandelo xa kuyimfuneko. Oku kuthetha ukuba endaweni yokulayisha onke amacandelo ngaxeshanye, kuphela amacandelo ayimfuneko alayishwayo xa kufuneka. Oku kunceda ukunciphisa ixesha lokulayisha iphepha lokuqala kunye nokuphucula ukusebenza. Kwakhona kuvumela ukulungelelaniswa kwekhowudi engcono kunye nokuhlukana kweenkxalabo, njengoko icandelo ngalinye linokulayishwa ngokuzimeleyo.
Ndiyisebenzisa njani iReact ukonqena kwirouter yam
I-React ivila luphawu lwe-React ekuvumela ukuba ungenise izinto ngaphandle. Oku kuthetha ukuba endaweni yokulayisha onke amacandelo ngaphambili, ungawalayisha njengoko kufuneka. Oku kunokuba luncedo ekuphuculeni ukusebenza kwezicelo ezinkulu.
Ukuze usebenzise i-React lazy kwi-router yakho kwi-React Router, kufuneka usonge icandelo ofuna ukulilayisha ngokonqena kumnxeba wokungenisa oguqukayo. Umzekelo:
const MyComponent = React.lazy(() => import('./MyComponent'));
Ke, xa uchaza iindlela zakho, vele ugqithise iMyComponent kwinxalenye yeNdlela ngolu hlobo:
Oku kuya kubangela iReact Router ukuba ilayishe ngokwamandla icandelo leMyComponent xa usiya kulo ndlela.
