Rešeno: reaguje na lenjo učitavanje rutera

Glavni problem vezan za React Router lijeno učitavanje je taj što može uzrokovati probleme s performansama ako se ne implementira ispravno. Lijeno učitavanje može povećati početno vrijeme učitavanja stranice, jer kod za svaku komponentu treba da se učita zasebno. Dodatno, ako se komponenta ne koristi često, možda se nikada neće učitati, što rezultira gubitkom resursa. Konačno, postoje potencijalni problemi s kompatibilnošću sa starijim pretraživačima koji ne podržavaju lijeno učitavanje.

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 App() { 

  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 App;

1. import React, { Suspense } iz 'react';
// Ova linija uvozi React biblioteku i Suspense komponentu iz React biblioteke.

2. import { BrowserRouter as Router, Route, Switch } iz 'react-router-dom';
// Ova linija uvozi komponente BrowserRouter, Route i Switch iz biblioteke react-router-dom.

3. const Home = React.lazy(() => import('./Home'));
// Ova linija kreira konstantu pod nazivom Home koja koristi funkciju lijenog učitavanja Reacta za dinamički uvoz komponente pod nazivom Home iz datoteke u istom direktoriju kao i ova datoteka (komponenta aplikacije).

4. const About = React.lazy(() => import('./About'));
// Ova linija kreira konstantu pod nazivom About koja koristi lijeno učitavanje za dinamički uvoz komponente pod nazivom About iz datoteke u istom direktoriju kao i ova datoteka (komponenta aplikacije).
const Kontakt = React.lazy(() => import('./Contact')); // Ova linija kreira konstantu pod nazivom Contact koja koristi lijeno učitavanje za dinamički uvoz komponente pod nazivom Contact iz datoteke u istom direktoriju kao i ova datoteka (komponenta aplikacije).

5. function App() { return ( // Ovo je funkcija strelice koja vraća JSX kod umotan u Router tag koji je ranije uvezen

6.Učitavanje…

}> //Ova neizvjesna oznaka omotava sve naše rute rezervnim rekvizitima učitavanja... ako je potrebno vrijeme za učitavanje bilo koje rute

7. //Switch tag će osigurati da se samo jedna ruta prikaže odjednom

8. //Ova ruta će prikazati početnu komponentu kada se poklapa tačna putanja “/”.

9. //Ova ruta će renderirati O komponenti kada se put “/about” podudara

10. //Ova ruta će prikazati komponentu kontakta kada se put “/contact” podudara ) } export default App; //Konačno zatvaramo sve oznake i izvozimo našu aplikaciju

Problem s lijenim učitavanjem

Lazy loading je tehnika koja se koristi za odlaganje učitavanja određenih komponenti dok ne budu potrebne. Ovo može pomoći u poboljšanju performansi aplikacije učitavanjem samo onoga što je potrebno u bilo kojem trenutku. Međutim, to može biti problem kada koristite React Router, jer ne podržava lijeno učitavanje iz kutije. Da bi zaobišli ovaj problem, programeri moraju ručno konfigurirati svoje rute kako bi omogućili lijeno učitavanje. Ovo može uključivati ​​postavljanje dinamičkog uvoza i podjele koda, što može biti složen i dugotrajan zadatak. Dodatno, neke biblioteke kao što je React Loadable će možda morati da se koriste kako bi se pravilno implementiralo lenjo učitavanje sa React Routerom.

Šta je React lazy load

React lazy load je karakteristika React Routera koja omogućava učitavanje komponenti na zahtjev. To znači da umjesto učitavanja svih komponenti odjednom, samo potrebne komponente se učitavaju kada je to potrebno. Ovo pomaže da se smanji početno vrijeme učitavanja stranice i poboljša performanse. Takođe omogućava bolju organizaciju koda i razdvajanje briga, jer se svaka komponenta može samostalno učitati.

Kako da koristim React lazy na ruteru

React lazy je karakteristika React-a koja vam omogućava dinamički uvoz komponenti. To znači da umjesto učitavanja svih komponenti unaprijed, možete ih učitati po potrebi. Ovo može biti korisno za optimizaciju performansi u velikim aplikacijama.

Da biste koristili React lazy na svom ruteru u React Routeru, trebate umotati komponentu koju želite lijeno učitati u poziv dinamičkog uvoza. Na primjer:

const MyComponent = React.lazy(() => import('./MyComponent'));

Zatim, kada definirate svoje rute, jednostavno proslijedite komponentu MyComponent u komponentu Route na sljedeći način:

Ovo će uzrokovati da React Router dinamički učita komponentu MyComponent prilikom navigacije do te rute.

Slični postovi:

Ostavite komentar