Glavni problem vezan za React Router v6 lazy suspense je taj što ga svi pretraživači još uvijek ne podržavaju u potpunosti. To znači da korisnici mogu imati problema kada pokušavaju pristupiti određenim stranicama ili funkcijama na web stranicama koristeći React Router v6 lazy suspense. Osim toga, još uvijek postoje neke greške i problemi s performansama koje je potrebno riješiti prije nego što se može koristiti u proizvodnim okruženjima. Konačno, API za lijeno učitavanje komponenti sa Suspenseom je još uvijek u ranoj fazi i može zahtijevati dodatno vrijeme razvoja kako bi se osigurala kompatibilnost sa 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 React biblioteku, kao i komponentu Suspense iz Reacta, i komponente BrowserRouter, Route i Switch iz react-router-doma.
2. Zatim definiše tri komponente (Home, About, Contact) koristeći React-ovu funkciju lijenog učitavanja da ih uveze iz njihovih odgovarajućih datoteka.
3. Definirana je funkcija AppRouter koja vraća komponentu rutera koja sadrži komponentu Suspense sa komponentom Switch unutar nje.
4. Unutar komponente Switch nalaze se tri komponente Route od kojih svaka prikazuje jednu od uvezenih komponenti kada se njihove odgovarajuće putanje podudaraju u URL-u (npr. '/' za Home).
5. Konačno, AppRouter se izvozi tako da se može koristiti na drugom mjestu u aplikaciji.
Kako koristite lijeno učitavanje u react ruteru v6
v6
Lazy loading je tehnika koja se koristi za odgađanje učitavanja određenih komponenti dok ne budu potrebne. U React Routeru v6, lijeno učitavanje se može postići korištenjem sintakse dinamičkog import(). Ova sintaksa vam omogućava da podijelite svoj kod u više paketa koji se zatim mogu učitati na zahtjev ili paralelno. Ovo pomaže u smanjenju početne veličine paketa i poboljšanju performansi. Da biste koristili lijeno učitavanje s React Router v6, morate umotati komponentu koju želite lijeno učitati u dinamički poziv import(). Poziv import() će vratiti obećanje koje će se riješiti kada se komponenta učita i bude spremna za prikazivanje.
Šta je napetost i lijeno u reagovanju
Suspenzija 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 navigira na stranicu koja zahtijeva autentifikaciju, ruta se može odgoditi dok se autentifikacija ne završi.
Lazy loading u React Router-u omogućava da se komponente učitavaju asinhrono kada su potrebne umjesto da se učitavaju sve odjednom. Ovo poboljšava performanse učitavanjem komponenti samo kada su potrebne i smanjuje količinu podataka koji se trebaju prenijeti preko mreže. Lijeno učitavanje također pomaže kod cijepanja koda, omogućavajući da se veće aplikacije razdvoje na manje dijelove koji se mogu učitati na zahtjev.
