Volver a los apuntes

Configurar React Router con lazy loading

Configurar un enrutamiento en una aplicación React utilizando react-router-dom con lazy loading para cargar las páginas de forma dinámica.

Instalación de React Router

Para javascript 
npm install react-router-dom
Para typescript 
npm install react-router-dom @types/react-router-dom

Definición de las Rutas

Se define un array de objetos, donde cada objeto contiene dos propiedade. se usa la función lazy de React para hacer carga diferida (lazy loading) de los componentes de la página. En lugar de cargar los componentes de forma inmediata cuando la aplicación se inicia, se cargan solo cuando se navega a la ruta correspondiente.

Code 
const dataRoutes = [
  {
    path: "/",
    element: lazy(() => import("./page/Home")),
  },
  {
    path: "/about",
    element: lazy(() => import("./page/About")),
  },
];

Configuración de Enrutamiento

App.tsx 
<BrowserRouter>
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      {dataRoutes.map((route) => (
        <Route
          key={route.path}
          path={route.path}
          Component={route.element}
        />
      ))}
    </Routes>
  </Suspense>
</BrowserRouter>
  • <BrowserRouter>: Configura el enrutador para manejar la navegación en la aplicación.
  • <Suspense>: Utiliza carga diferida para los componentes, mostrando un indicador de carga mientras los componentes no se han cargado.
  • <Routes>: Contenedor de todas las rutas.
  • <Route>: Mapea las rutas de la aplicación, especificando qué componente se renderiza para cada ruta.