Pagrindinė problema, susijusi su „React Router v6 lazy suspense“, yra ta, kad ji dar nėra visiškai palaikoma visose naršyklėse. Tai reiškia, kad naudotojai gali susidurti su problemomis bandydami pasiekti tam tikrus puslapius ar funkcijas svetainėse naudodami „React Router v6 lazy suspense“. Be to, vis dar yra tam tikrų klaidų ir našumo problemų, kurias reikia išspręsti, kad ją būtų galima naudoti gamybinėje aplinkoje. Galiausiai API, skirta tingiai įkelti komponentus su „Suspense“, vis dar yra ankstyvoje stadijoje ir gali prireikti papildomo kūrimo laiko, kad būtų užtikrintas suderinamumas su esamomis programomis.
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 kodas importuoja „React“ biblioteką, taip pat „Suspense“ komponentą iš „React“ ir „BrowserRouter“, „Route“ ir „Switch“ komponentus iš „react-router-dom“.
2. Tada jis apibrėžia tris komponentus (Pagrindinis, Apie, Kontaktai), naudodamas „React“ tingaus įkėlimo funkciją, kad importuotų juos iš atitinkamų failų.
3. Apibrėžiama funkcija „AppRouter“, kuri grąžina maršrutizatoriaus komponentą, kuriame yra „Suspense“ komponentas, kurio viduje yra „Switch“ komponentas.
4. Komponento „Switch“ viduje yra trys maršruto komponentai, kurių kiekvienas atvaizduoja vieną iš importuotų komponentų, kai atitinkami jų keliai atitinka URL (pvz., „/“ pagrindiniam).
5. Galiausiai „AppRouter“ eksportuojama, kad ją būtų galima naudoti kitose programos vietose.
Kaip naudoti tingų įkėlimą react router v6
v6
Tingus įkėlimas yra būdas atidėti tam tikrų komponentų įkėlimą, kol jų prireiks. React Router v6 lėtą įkėlimą galima pasiekti naudojant dinaminę importo () sintaksę. Ši sintaksė leidžia padalyti kodą į kelis paketus, kuriuos vėliau galima įkelti pagal poreikį arba lygiagrečiai. Tai padeda sumažinti pradinį paketo dydį ir pagerinti našumą. Norėdami naudoti atsainį įkėlimą naudodami „React Router v6“, turite įtraukti komponentą, kurį norite atidėtai įkelti, į dinaminį importo () iškvietimą. Import() iškvietimas grąžins pažadą, kuris bus išspręstas, kai komponentas bus įkeltas ir bus paruoštas pateikti.
Kas yra nežinia ir tinginys reaguoti
Suspense in React Router yra būdas atidėti maršruto įkėlimą, kol bus įvykdyta kokia nors sąlyga. Tai gali būti naudojama siekiant pagerinti programos veikimą, įkeliant maršrutus tik tada, kai jų reikia. Pavyzdžiui, jei vartotojas naršo į puslapį, kuriame reikalingas autentifikavimas, maršrutas gali būti atidėtas, kol autentifikavimas bus baigtas.
Atitinkamas „React Router“ įkėlimas leidžia komponentus įkelti asinchroniškai, kai jų reikia, o ne visus iš karto. Tai pagerina našumą, nes komponentai įkeliami tik tada, kai jų reikia, ir sumažinamas duomenų, kuriuos reikia perduoti tinklu, kiekis. Tingus įkėlimas taip pat padeda skaidyti kodą, todėl didesnes programas galima suskirstyti į mažesnius gabalus, kuriuos galima įkelti pagal poreikį.
