Glavna težava v zvezi z React Router v6 lazy suspense je, da ga vsi brskalniki še ne podpirajo v celoti. To pomeni, da lahko uporabniki naletijo na težave, ko poskušajo dostopati do določenih strani ali funkcij na spletnih mestih z uporabo lene napetosti React Router v6. Poleg tega je še vedno nekaj napak in težav z zmogljivostjo, ki jih je treba odpraviti, preden se lahko uporablja v produkcijskih okoljih. Nazadnje, API za komponente za leno nalaganje s Suspense je še vedno v zgodnjih fazah in bo morda potreboval dodaten čas za razvoj, da se zagotovi združljivost z obstoječimi aplikacijami.
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. Ta koda uvozi knjižnico React, kot tudi komponento Suspense iz Reacta ter komponente BrowserRouter, Route in Switch iz react-router-dom.
2. Nato definira tri komponente (Domača stran, O tem, Kontakt) z uporabo Reactove funkcije za leno nalaganje, da jih uvozi iz ustreznih datotek.
3. Definirana je funkcija AppRouter, ki vrne komponento Router, ki vsebuje komponento Suspense s komponento Switch v njej.
4. Znotraj komponente Switch so tri komponente Route, od katerih vsaka upodablja eno od uvoženih komponent, ko se njihove ustrezne poti ujemajo v URL-ju (npr. '/' za Home).
5. Na koncu je AppRouter izvožen, tako da ga je mogoče uporabiti drugje v aplikaciji.
Kako uporabljate leno nalaganje v usmerjevalniku React v6
v6
Leno nalaganje je tehnika, ki se uporablja za odlog nalaganja določenih komponent, dokler niso potrebne. V React Router v6 lahko leno nalaganje dosežete z uporabo dinamične sintakse import(). Ta sintaksa vam omogoča, da kodo razdelite na več svežnjev, ki jih je nato mogoče naložiti na zahtevo ali vzporedno. To pomaga zmanjšati začetno velikost svežnja in izboljša zmogljivost. Če želite uporabiti leno nalaganje z React Router v6, morate komponento, ki jo želite leno naložiti, zaviti v dinamični klic import(). Klic import() bo vrnil obljubo, ki se bo razrešila, ko bo komponenta naložena in pripravljena za upodobitev.
Kaj je suspenz in len v odzivu
Suspenz v React Routerju je način za odložitev nalaganja poti, dokler ni izpolnjen nek pogoj. To je mogoče uporabiti za izboljšanje delovanja aplikacije z nalaganjem poti samo, ko so potrebne. Na primer, če se uporabnik pomika na stran, ki zahteva preverjanje pristnosti, se lahko pot odloži, dokler se preverjanje pristnosti ne zaključi.
Leno nalaganje v React Routerju omogoča, da se komponente naložijo asinhrono, ko so potrebne, namesto da se naložijo vse naenkrat. To izboljša zmogljivost z nalaganjem komponent le, ko so potrebne, in zmanjša količino podatkov, ki jih je treba prenesti po omrežju. Počasno nalaganje pomaga tudi pri razdelitvi kode, kar omogoča razčlenitev večjih aplikacij na manjše dele, ki jih je mogoče naložiti na zahtevo.
