Suurin React Router v6 laiska jännitysongelma on, että kaikki selaimet eivät vielä tue sitä täysin. Tämä tarkoittaa, että käyttäjät voivat kokea ongelmia yrittäessään käyttää tiettyjä verkkosivustojen sivuja tai ominaisuuksia React Router v6:n laiskan jännityksen avulla. Lisäksi on vielä joitakin virheitä ja suorituskykyongelmia, jotka on korjattava, ennen kuin sitä voidaan käyttää tuotantoympäristöissä. Lopuksi Suspensen komponenttien laiskalataussovellusliittymä on vielä alkuvaiheessa ja saattaa vaatia lisäaikaa yhteensopivuuden varmistamiseksi olemassa olevien sovellusten kanssa.
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. Tämä koodi tuo React-kirjaston sekä Suspense-komponentin Reactista ja BrowserRouter-, Route- ja Switch-komponentit react-router-domista.
2. Sitten se määrittelee kolme komponenttia (Koti, Tietoja, Yhteystiedot) Reactin laiskan latausominaisuuden avulla niiden tuomiseksi vastaavista tiedostoistaan.
3. Määritetään AppRouter-funktio, joka palauttaa reitittimen komponentin, joka sisältää Suspense-komponentin ja sen sisällä Switch-komponentin.
4. Switch-komponentin sisällä on kolme Route-komponenttia, joista jokainen hahmontaa yhden tuoduista komponenteista, kun niiden polut täsmäävät URL-osoitteessa (esim. '/' Home).
5. Lopuksi AppRouter viedään, jotta sitä voidaan käyttää muualla sovelluksessa.
Kuinka käytät laiska latausta react-reitittimessä v6
v6
Laiska lataus on tekniikka, jota käytetään lykkäämään tiettyjen komponenttien lataamista, kunnes niitä tarvitaan. React Router v6:ssa laiska lataus voidaan saavuttaa käyttämällä dynaamista import()-syntaksia. Tämän syntaksin avulla voit jakaa koodisi useisiin nippuihin, jotka voidaan sitten ladata pyynnöstä tai rinnakkain. Tämä auttaa pienentämään alkuperäisen nipun kokoa ja parantamaan suorituskykyä. Jos haluat käyttää laiskalatausta React Router v6:n kanssa, sinun on käärittävä laiskalatauskomponentti dynaamiseen import()-kutsuun. Import()-kutsu palauttaa lupauksen, joka ratkeaa, kun komponentti on ladattu ja valmis hahmonnettavaksi.
Mikä on jännitystä ja laiska reagoida
Suspense in React Router on tapa viivyttää reitin lataamista, kunnes jokin ehto täyttyy. Tätä voidaan käyttää parantamaan sovelluksen suorituskykyä lataamalla reittejä vain silloin, kun niitä tarvitaan. Jos käyttäjä esimerkiksi navigoi todennusta vaativalle sivulle, reittiä voidaan viivyttää, kunnes todennus on suoritettu.
Laiska lataus React Routerissa mahdollistaa komponenttien lataamisen asynkronisesti, kun niitä tarvitaan, sen sijaan, että ne ladataan kaikki kerralla. Tämä parantaa suorituskykyä lataamalla komponentteja vain silloin, kun niitä tarvitaan, ja vähentää verkon kautta siirrettävän tiedon määrää. Laiska lataus auttaa myös koodin jakamisessa, jolloin suuremmat sovellukset voidaan jakaa pienempiin osiin, jotka voidaan ladata pyynnöstä.
