Galvenā problēma, kas saistīta ar React Router v6 lazy suspense, ir tā, ka to vēl pilnībā neatbalsta visas pārlūkprogrammas. Tas nozīmē, ka lietotājiem var rasties problēmas, mēģinot piekļūt noteiktām lapām vai funkcijām vietnēs, izmantojot React Router v6 lazy suspense. Turklāt joprojām ir dažas kļūdas un veiktspējas problēmas, kas ir jānovērš, pirms to var izmantot ražošanas vidēs. Visbeidzot, API slinkai komponentu ielādei ar Suspense joprojām ir agrīnā stadijā, un, lai nodrošinātu saderību ar esošajām lietojumprogrammām, var būt nepieciešams papildu izstrādes laiks.
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. Šis kods importē React bibliotēku, kā arī Suspense komponentu no React un BrowserRouter, Route un Switch komponentus no react-router-dom.
2. Pēc tam tiek definēti trīs komponenti (Sākums, Par, Kontakti), izmantojot React slinkās ielādes funkciju, lai tos importētu no attiecīgajiem failiem.
3. Ir definēta funkcija AppRouter, kas atgriež maršrutētāja komponentu, kas satur Suspense komponentu ar komponentu Switch tā iekšpusē.
4. Komponenta Switch iekšpusē ir trīs maršruta komponenti, no kuriem katrs atveido vienu no importētajiem komponentiem, ja to attiecīgie ceļi ir saskaņoti vietrādī URL (piemēram, “/” sākumam).
5. Visbeidzot, AppRouter tiek eksportēts, lai to varētu izmantot citur lietojumprogrammā.
Kā react maršrutētājā v6 izmantot slinko ielādi
v6
Slinka ielāde ir paņēmiens, ko izmanto, lai atliktu noteiktu komponentu ielādi, līdz tās ir vajadzīgas. React Router v6 slinko ielādi var panākt, izmantojot dinamisko importa () sintaksi. Šī sintakse ļauj sadalīt kodu vairākos komplektos, kurus pēc tam var ielādēt pēc pieprasījuma vai paralēli. Tas palīdz samazināt sākotnējo komplekta izmēru un uzlabot veiktspēju. Lai izmantotu slinko ielādi ar React Router v6, komponents, kuru vēlaties slinki ielādēt, ir jāietver dinamiskā importa() izsaukumā. Import() izsaukums atgriezīs solījumu, kas tiks atrisināts, kad komponents būs ielādēts un gatavs renderēšanai.
Kas ir spriedze un slinkums reaģēt
Negaidīšana programmā React Router ir veids, kā aizkavēt maršruta ielādi, līdz tiek izpildīti daži nosacījumi. To var izmantot, lai uzlabotu lietojumprogrammas veiktspēju, ielādējot maršrutus tikai tad, kad tie ir nepieciešami. Piemēram, ja lietotājs dodas uz lapu, kurai nepieciešama autentifikācija, maršruts var tikt aizkavēts, līdz autentifikācija ir pabeigta.
Slinka ielāde programmā React Router ļauj komponentus ielādēt asinhroni, kad tie ir nepieciešami, nevis ielādēt visus uzreiz. Tas uzlabo veiktspēju, ielādējot komponentus tikai tad, kad tie ir nepieciešami, un samazina datu apjomu, kas jāpārsūta tīklā. Slinka ielāde palīdz arī koda sadalīšanai, ļaujot lielākas lietojumprogrammas sadalīt mazākos gabalos, kurus var ielādēt pēc pieprasījuma.
