Inkinga enkulu ehlobene ne-React Router v6 ukungabaza ubuvila ukuthi ayikasekelwa ngokugcwele yizo zonke iziphequluli. Lokhu kusho ukuthi abasebenzisi bangase babe nezinkinga lapho bezama ukufinyelela amakhasi athile noma izici kumawebhusayithi besebenzisa i-React Router v6 ukungabaza okuvilapha. Ukwengeza, zisekhona iziphazamisi nezinkinga zokusebenza okudingeka zixazululwe ngaphambi kokuthi zisetshenziswe ezindaweni zokukhiqiza. Okokugcina, i-API yezingxenye ezivilaphayo zokulayisha nge-Suspense isesigabeni sayo sokuqala futhi ingadinga isikhathi esengeziwe sokuthuthukisa ukuze kuqinisekiswe ukuhambisana nezinhlelo zokusebenza ezikhona.
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 khodi ingenisa ngaphandle umtapo wezincwadi we-React, kanye nengxenye ye-Suspense evela ku-React, kanye nezingxenye ze-BrowserRouter, Route, kanye ne-Switch kusuka ku-react-router-dom.
2. Bese ichaza izingxenye ezintathu (Ikhaya, Mayelana, Xhumana) isebenzisa isici sokulayisha esivilaphayo se-React ukuze izingenise zisuka kumafayela azo.
3. Umsebenzi we-AppRouter uyachazwa obuyisela ingxenye Yerutha equkethe ingxenye ye-Suspense enengxenye ye-Shintsha ngaphakathi kwayo.
4. Ngaphakathi kwengxenye ye-Shintshi kunezingxenye ezintathu Zomzila ngayinye eyenza ingxenye eyodwa kwezingenisiwe uma izindlela zazo zifaniswe ku-URL (isb, '/' Yekhaya).
5. Ekugcineni, i-AppRouter ithunyelwa kwamanye amazwe ukuze isetshenziswe kwenye indawo kuhlelo lokusebenza.
Ukusebenzisa kanjani ukulayisha okuvilaphayo ku-react router v6
v6
Ukulayisha okuvilaphayo kuyindlela esetshenziselwa ukuhlehlisa ukulayishwa kwezingxenye ezithile kuze kube yilapho sezidingeka. Ku-React Router v6, ukulayisha okuvilaphayo kungafinyelelwa ngokusebenzisa i-syntax yokungenisa () eguquguqukayo. Le syntax ikuvumela ukuthi uhlukanise ikhodi yakho ibe izinqwaba eziningi ezingase zilayishwe ngokufunwa noma ngokuhambisana. Lokhu kusiza ukunciphisa usayizi wokuqala wenqwaba futhi kuthuthukise ukusebenza. Ukuze usebenzise ukulayisha okuvilaphayo nge-React Router v6, kufanele ugoqe ingxenye ofuna ukuyilayisha ngokuvilapha ocingweni lokungenisa() oluguqukayo. I-import() ikholi izobuyisela isithembiso esizoxazulula lapho ingxenye isilayishiwe futhi isilungele ukwenziwa.
Kuyini ukungabaza nokuvilapha ekuphenduleni
Ukungabaza ku-React Router kuyindlela yokubambezela ukulayishwa komzila kuze kube yilapho kuhlangatshezwana nemibandela ethile. Lokhu kungasetshenziswa ukuthuthukisa ukusebenza kohlelo lokusebenza ngokulayisha kuphela imizila lapho idingeka. Isibonelo, uma umsebenzisi ezulazulela ekhasini elidinga ukuqinisekiswa, umzila ungabambezeleka kuze kuqedwe ukuqinisekiswa.
Ukulayisha ngobuvila ku-React Router kuvumela izingxenye ukuthi zilayishwe ngokulinganayo lapho zidingeka esikhundleni sokulayishwa zonke ngesikhathi esisodwa. Lokhu kuthuthukisa ukusebenza ngokulayisha kuphela izingxenye uma zidingekile futhi kunciphisa inani ledatha edinga ukudluliselwa kunethiwekhi. Ukulayisha okuvilaphayo kusiza futhi ekuhlukaniseni amakhodi, okuvumela izinhlelo zokusebenza ezinkulu ukuba zihlukaniswe zibe izingcezu ezincane ezingalayishwa ngokufunwa.
