Ingxaki ephambili enxulumene neReact Router v6 yokukrokra ukonqena kukuba ayikaxhaswa ngokupheleleyo ngabo bonke abakhangeli. Oku kuthetha ukuba abasebenzisi banokufumana imiba xa bezama ukufikelela kumaphepha athile okanye iimpawu kwiiwebhusayithi besebenzisa iReact Router v6 ukonqena. Ukongeza, kusekho ezinye iibhugi kunye nemiba yokusebenza efuna ukulungiswa ngaphambi kokuba isetyenziswe kwindawo yemveliso. Ekugqibeleni, i-API yamacandelo okulayisha amavila kunye ne-Suspense isekumanqanaba ayo okuqala kwaye inokufuna ixesha elongezelelweyo lokuphuhlisa ukuqinisekisa ukuhambelana nezicelo ezikhoyo.
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. Le khowudi ingenisa ngaphandle ilayibrari ye-React, kunye necandelo le-Suspense elivela kwi-React, kunye ne-BrowserRouter, i-Route, kunye ne-Switch components ukusuka kwi-react-router-dom.
2. Emva koko ichaza amacandelo amathathu (iKhaya, malunga, noQhagamshelwano) usebenzisa i-React's ivila yokulayisha i-fitsha yokuthumela ngaphandle kwiifayile zabo.
3. Umsebenzi we-AppRouter uchazwa obuyisela icandelo leNdlela equlathe icandelo le-Suspense kunye necandelo loTshintsho ngaphakathi kuyo.
4. Ngaphakathi kwecandelo loTshintsho kukho amacandelo amathathu eNdlela apho ngalinye linika elinye lamacandelo athathwe kumazwe angaphandle xa iindlela zazo zingqinelaniswe kwi-URL (umz., '/' yeKhaya).
5. Ekugqibeleni, i-AppRouter ithunyelwa ngaphandle ukuze isetyenziswe kwenye indawo kwisicelo.
Usebenzisa njani ukulayisha ukonqena kwi-react router v6
v6
Ukulayishwa kobuvila bubuchule obusetyenziselwa ukurhoxisa ukulayishwa kwamalungu athile de abe afuneka. KwiReact Router v6, ukulayisha ukonqena kunokufezekiswa ngokusebenzisa ukungenisa () syntax okuguquguqukayo. Le syntax ikuvumela ukuba wahlule ikhowudi yakho kwiinqwaba ezininzi ezinokuthi emva koko zilayishwe ngokwemfuno okanye ngokuhambelanayo. Oku kunceda ukunciphisa ubungakanani bokuqala benqwaba kunye nokuphucula ukusebenza. Ukusebenzisa ukulayisha ukonqena ngeReact Router v6, kufuneka usonge inxalenye ofuna ukuyonqena ukulayisha kwifowuni yokungenisa () eguqukayo. I-import() ifowuni iyakubuyisela isithembiso esiya kusombulula xa inxalenye ilayishiwe kwaye ilungele ukunikezelwa.
Yintoni ukukrokra kwaye ukonqena ukuphendula
I-suspense kwi-React Router yindlela yokulibazisa ukulayishwa kwendlela kude kube kuhlangatyezwane nemeko ethile. Oku kungasetyenziselwa ukuphucula ukusebenza kwesicelo ngokulayisha kuphela iindlela xa zifuneka. Umzekelo, ukuba umsebenzisi ujonga kwiphepha elifuna uqinisekiso, indlela inokulibaziseka de uqinisekiso lugqityiwe.
Ukulayishwa kobuvila kwiReact Router kuvumela ukuba amacandelo alayishwe ngokulinganayo xa efuneka endaweni yokulayishwa onke ngaxeshanye. Oku kuphucula ukusebenza ngokulayisha kuphela amacandelo xa efunwa kwaye kunciphisa inani ledatha ekufuneka idluliselwe kwinethiwekhi. Ukulayishwa kobuvila kunceda kwakhona ngokuhlukana kwekhowudi, ukuvumela ukuba izicelo ezinkulu zihlulwe zibe ziincinci ezincinci ezinokulayishwa ngokufunwa.
