El principal problema relacionat amb React Router v6 lazy suspens és que encara no és totalment compatible amb tots els navegadors. Això vol dir que els usuaris poden experimentar problemes quan intenten accedir a determinades pàgines o funcions dels llocs web que utilitzen React Router v6 lazy suspense. A més, encara hi ha alguns errors i problemes de rendiment que cal solucionar abans que es pugui utilitzar en entorns de producció. Finalment, l'API per a components de càrrega mandrosa amb Suspense encara està en les seves primeres etapes i pot requerir temps de desenvolupament addicional per garantir la compatibilitat amb les aplicacions existents.
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. Aquest codi importa la biblioteca React, així com el component Suspense de React i els components BrowserRouter, Route i Switch de react-router-dom.
2. A continuació, defineix tres components (Inici, Sobre, Contacte) mitjançant la funció de càrrega mandrosa de React per importar-los dels seus respectius fitxers.
3. Es defineix la funció AppRouter que retorna un component Router que conté un component Suspense amb un component Switch al seu interior.
4. Dins del component Switch hi ha tres components de ruta que representen cadascun dels components importats quan els seus respectius camins coincideixen a l'URL (per exemple, '/' per a Inici).
5. Finalment, AppRouter s'exporta perquè es pugui utilitzar en altres llocs de l'aplicació.
Com s'utilitza la càrrega mandrosa a react router v6
v6
La càrrega mandrosa és una tècnica que s'utilitza per ajornar la càrrega de determinats components fins que siguin necessaris. A React Router v6, la càrrega mandrosa es pot aconseguir mitjançant la sintaxi import() dinàmica. Aquesta sintaxi us permet dividir el vostre codi en diversos paquets que després es poden carregar sota demanda o en paral·lel. Això ajuda a reduir la mida inicial del paquet i millorar el rendiment. Per utilitzar la càrrega mandrosa amb React Router v6, heu d'embolicar el component que voleu carregar mandrosos en una crida dinàmica d'import() . La crida import() retornarà una promesa que es resoldrà quan el component s'hagi carregat i estigui llest per ser representat.
Què és suspens i mandrós en reaccionar
El suspens a React Router és una manera de retardar la càrrega d'una ruta fins que es compleixi alguna condició. Això es pot utilitzar per millorar el rendiment d'una aplicació només carregant rutes quan siguin necessàries. Per exemple, si un usuari navega a una pàgina que requereix autenticació, la ruta es pot retardar fins que s'hagi completat l'autenticació.
La càrrega mandrosa a React Router permet que els components es carreguin de manera asíncrona quan siguin necessaris en lloc de carregar-los tots alhora. Això millora el rendiment en carregar només components quan són necessaris i redueix la quantitat de dades que s'han de transferir a la xarxa. La càrrega mandrosa també ajuda a dividir el codi, permetent que les aplicacions més grans es desglossin en fragments més petits que es poden carregar a demanda.
