A React Router v6 lazy feszültséggel kapcsolatos fő probléma az, hogy még nem támogatja teljes mértékben minden böngésző. Ez azt jelenti, hogy a felhasználók problémákat tapasztalhatnak, amikor a React Router v6 lazy suspense használatával próbálnak elérni bizonyos oldalakat vagy funkciókat a webhelyeken. Ezenkívül még mindig vannak olyan hibák és teljesítményproblémák, amelyeket orvosolni kell, mielőtt éles környezetben használhatók. Végül a Suspense összetevők lusta betöltésére szolgáló API még korai szakaszában van, és további fejlesztési időt igényelhet a meglévő alkalmazásokkal való kompatibilitás biztosítása érdekében.
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. Ez a kód importálja a React könyvtárat, valamint a Suspense összetevőt a Reactból, valamint a BrowserRouter, Route és Switch összetevőket a react-router-dom fájlból.
2. Ezután három összetevőt határoz meg (Otthon, Névjegy, Kapcsolat) a React lusta betöltési funkciójával, hogy importálja őket a megfelelő fájlokból.
3. Meg van határozva az AppRouter függvény, amely egy olyan Router komponenst ad vissza, amely egy Suspense komponenst tartalmaz, benne egy Switch komponenssel.
4. A Switch komponensen belül három útvonal-összetevő található, amelyek mindegyike megjeleníti az importált összetevők egyikét, ha a megfelelő elérési útjuk megegyezik az URL-ben (pl. „/” a Home esetén).
5. Végül az AppRouter exportálásra kerül, hogy máshol is használható legyen az alkalmazásban.
Hogyan használja a lusta betöltést a react router v6-ban
v6
A lusta betöltés egy olyan technika, amellyel bizonyos alkatrészek betöltését elhalasztják, amíg szükség van rájuk. A React Router v6-ban a lusta betöltés a dinamikus import() szintaxis használatával érhető el. Ez a szintaxis lehetővé teszi, hogy a kódot több csomagra ossza fel, amelyeket aztán igény szerint vagy párhuzamosan betölthet. Ez segít csökkenteni a kezdeti köteg méretét és javítani a teljesítményt. Ha a React Router v6-tal való lusta betöltést szeretné használni, dinamikus import() hívásba kell csomagolnia azt az összetevőt, amelyet a lusta betöltéssel szeretne betölteni. Az import() hívás ígéretet ad vissza, amely akkor oldódik meg, amikor az összetevő betöltődik és készen áll a megjelenítésre.
Mi a feszültség és a lusta reagálás
Suspense in React Router egy módja annak, hogy késleltesse az útvonal betöltését, amíg bizonyos feltételek nem teljesülnek. Ez felhasználható egy alkalmazás teljesítményének javítására úgy, hogy csak akkor tölti be az útvonalakat, amikor szükség van rájuk. Például, ha a felhasználó egy hitelesítést igénylő oldalra navigál, az útvonal késleltethető, amíg a hitelesítés be nem fejeződik.
A React Router késleltetett betöltése lehetővé teszi, hogy az összetevőket aszinkron módon töltsék be, amikor szükség van rájuk, ahelyett, hogy egyszerre. Ez javítja a teljesítményt azáltal, hogy csak akkor tölti be az összetevőket, amikor szükség van rájuk, és csökkenti a hálózaton keresztül továbbítandó adatok mennyiségét. A lusta betöltés a kódfelosztást is segíti, lehetővé téve a nagyobb alkalmazások kisebb darabokra bontását, amelyek igény szerint betölthetők.
