Glavni problem vezan uz React Router v6 lazy suspense je taj što ga još uvijek ne podržavaju svi preglednici. To znači da korisnici mogu imati problema kada pokušavaju pristupiti određenim stranicama ili značajkama na web-mjestima koristeći React Router v6 lijenu neizvjesnost. Osim toga, još uvijek postoje neke pogreške i problemi s performansama koje je potrebno riješiti prije nego što se može koristiti u proizvodnim okruženjima. Naposljetku, API za odgodno učitavanje komponenti s Suspenseom još je u ranoj fazi i može zahtijevati dodatno vrijeme razvoja kako bi se osigurala kompatibilnost s postojećim aplikacijama.
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. Ovaj kod uvozi biblioteku React, kao i komponentu Suspense iz Reacta, te komponente BrowserRouter, Route i Switch iz react-router-dom.
2. Zatim definira tri komponente (Početna, O nama, Kontakt) koristeći Reactovu značajku odlijepljenog učitavanja kako bi ih uvezla iz odgovarajućih datoteka.
3. Definirana je funkcija AppRouter koja vraća komponentu Router koja sadrži komponentu Suspense s komponentom Switch unutar nje.
4. Unutar komponente Switch nalaze se tri komponente Route od kojih svaka prikazuje jednu od uvezenih komponenti kada se njihove staze podudaraju u URL-u (npr. '/' za Home).
5. Konačno, AppRouter se izvozi tako da se može koristiti negdje drugdje u aplikaciji.
Kako koristite odgođeno učitavanje u React routeru v6
v6
Lijeno učitavanje je tehnika koja se koristi za odgodu učitavanja određenih komponenti dok ne budu potrebne. U React Routeru v6, odgođeno učitavanje može se postići korištenjem sintakse dinamičkog import(). Ova sintaksa vam omogućuje da svoj kod podijelite u više paketa koji se zatim mogu učitati na zahtjev ili paralelno. To pomaže smanjiti početnu veličinu paketa i poboljšati izvedbu. Da biste koristili odlagano učitavanje s React Routerom v6, morate omotati komponentu koju želite odlagano učitavati u dinamički import() poziv. Poziv import() vratit će obećanje koje će se riješiti kada se komponenta učita i bude spremna za renderiranje.
Što je neizvjesnost i lijen u reakciji
Suspenza u React Routeru je način da se odgodi učitavanje rute dok se ne ispuni neki uvjet. Ovo se može koristiti za poboljšanje performansi aplikacije učitavanjem ruta samo kada su potrebne. Na primjer, ako korisnik ide na stranicu koja zahtijeva autentifikaciju, ruta može biti odgođena dok se autentifikacija ne dovrši.
Lijeno učitavanje u React Routeru omogućuje da se komponente učitavaju asinkrono kada su potrebne umjesto da se učitavaju sve odjednom. Ovo poboljšava izvedbu učitavanjem komponenti samo kada su potrebne i smanjuje količinu podataka koje je potrebno prenijeti preko mreže. Lijeno učitavanje također pomaže kod dijeljenja koda, dopuštajući rastavljanje većih aplikacija na manje dijelove koji se mogu učitati na zahtjev.
