Babban matsalar da ke da alaƙa da React Router v6 lazy suspense shine cewa duk masu bincike ba su sami cikakken goyon baya ba. Wannan yana nufin cewa masu amfani na iya fuskantar al'amura yayin ƙoƙarin samun dama ga wasu shafuka ko fasali akan gidajen yanar gizo ta amfani da React Router v6 lazy suspense. Bugu da ƙari, har yanzu akwai wasu kurakurai da matsalolin aiki waɗanda ke buƙatar magance su kafin a iya amfani da su a wuraren samarwa. A ƙarshe, API don abubuwan ɗora nauyi tare da Suspense har yanzu yana kan matakin farko kuma yana iya buƙatar ƙarin lokacin haɓaka don tabbatar da dacewa da aikace-aikacen da ake dasu.
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. Wannan lambar tana shigo da ɗakin karatu na React, da kuma bangaren Suspense daga React, da BrowserRouter, Route, and Switch components daga react-router-dom.
2. Sannan ya ayyana abubuwa guda uku (Home, About, Contact) ta hanyar amfani da fasalin lazy loading na React don shigo da su daga fayilolinsu.
3. An bayyana aikin AppRouter wanda ke mayar da bangaren na'ura mai ba da hanya tsakanin hanyoyin sadarwa mai dauke da suspense bangaren tare da wani bangaren Switch a ciki.
4. A cikin ɓangaren Sauyawa akwai abubuwan da aka haɗa da Route guda uku waɗanda kowannensu ke ba da ɗayan abubuwan da aka shigo da su lokacin da aka daidaita hanyoyinsu a cikin URL (misali, '/' na Gida).
5. A ƙarshe, ana fitar da AppRouter don a iya amfani da shi a wani wuri a cikin aikace-aikacen.
Yadda ake amfani da lazy loading a react router v6
v6
Lazy loading wata dabara ce da ake amfani da ita don jinkirta lodin wasu abubuwan har sai an buƙata. A cikin React Router v6, ana iya samun raɗaɗin lodi ta amfani da madaidaicin shigo da () syntax. Wannan syntax yana ba ku damar raba lambar ku zuwa daure da yawa waɗanda za'a iya loda su akan buƙata ko a layi daya. Wannan yana taimakawa rage girman gungu na farko da haɓaka aiki. Don amfani da lazy loading tare da React Router v6, dole ne ku nannade bangaren da kuke son rage nauyi a cikin kira () mai kuzari. Kiran shigo da () zai dawo da alƙawari wanda zai warware lokacin da aka loda kayan aikin kuma yana shirye don yin.
Menene shakku da kasala a cikin martani
Suspense a cikin React Router hanya ce ta jinkirta lodin hanya har sai an cika wasu sharuɗɗan. Ana iya amfani da wannan don haɓaka aikin aikace-aikacen ta hanyar loda hanyoyi kawai lokacin da ake buƙata. Misali, idan mai amfani yana kewayawa zuwa shafin da ke buƙatar tantancewa, ana iya jinkirta hanyar har sai an gama tantancewa.
Lazy loading a cikin React Router yana ba da damar yin lodin abubuwan da aka haɗa ba tare da an haɗa su ba lokacin da ake buƙata maimakon a loda su gaba ɗaya. Wannan yana haɓaka aiki ta hanyar loda abubuwan haɗin gwiwa kawai lokacin da ake buƙata kuma yana rage adadin bayanan da ake buƙatar canjawa wuri akan hanyar sadarwa. Lazy loading shima yana taimakawa tare da rarrabuwar lambar, yana ba da damar manyan aikace-aikacen da za a rushe su cikin ƙananan guntu waɗanda za'a iya lodawa akan buƙata.
