Como se mencionó anteriormente, es necesario importar los componentes que se renderizarán cuando un usuario navegue a rutas específicas en nuestra aplicación. Para lograr esto, se utilizará la función lazy de la biblioteca React.

La sintaxis para utilizar la función lazy para importar un componente es la siguiente:

import { lazy } from 'react';

const View = lazy(() => import('./View.js'));

Cada parte de esta sintaxis cumple la siguiente función:

• Línea 1: Importa la función lazy de la biblioteca React. Esta función permite la división de código y la carga diferida de componentes;
• Línea 3: Declara una variable (View en este caso) utilizando la función lazy. La función lazy recibe una función como argumento, y esta función retorna una declaración de importación dinámica. La declaración de importación importa de manera asíncrona el archivo/módulo especificado (en este caso, View.js) utilizando la palabra clave import. Al envolver la declaración de importación con lazy, se habilita la carga diferida del componente View.js.

Ejemplo

Apliquemos este concepto a nuestro proyecto importando los componentes para las diferentes vistas. Estas vistas incluyen la página de inicio, la página de información y la página de contactos. Es importante destacar que estas vistas ya han sido creadas, y la tarea actual es utilizarlas en nuestro enrutamiento:

import { lazy } from "react";

const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));

Se utiliza la función lazy de la biblioteca React para importar los componentes de las diferentes vistas. Cada componente se importa de manera dinámica utilizando la declaración import, y se especifican las rutas relativas a los archivos de los componentes (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Al importar estos componentes con carga diferida, se garantiza que solo se cargan cuando es necesario, lo que contribuye a una experiencia de usuario más eficiente y receptiva.