Comme mentionné précédemment, il est nécessaire d'importer les composants qui seront affichés lorsqu'un utilisateur navigue vers des chemins spécifiques dans notre application. Pour cela, nous allons utiliser la fonction lazy de la bibliothèque React.

La syntaxe pour utiliser la fonction lazy afin d'importer un composant est la suivante :

import { lazy } from 'react';

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

Voici ce que fait chaque partie de cette syntaxe :

• Ligne 1 : Importe la fonction lazy depuis la bibliothèque React. Cette fonction permet le découpage du code et le chargement paresseux des composants ;
• Ligne 3 : Déclare une variable (View dans cet exemple) en utilisant la fonction lazy. La fonction lazy prend une fonction en argument, et cette fonction retourne une instruction d'importation dynamique. L'instruction d'importation importe de manière asynchrone le fichier/module spécifié (dans ce cas, View.js) à l'aide du mot-clé import. En enveloppant l'instruction d'importation avec lazy, on active le chargement paresseux du composant View.js.

Exemple

Appliquons ce concept à notre projet en important les composants pour différentes vues. Ces vues incluent la page d'accueil, la page à propos et la page des contacts. Il est important de noter que ces vues ont déjà été créées, et notre tâche actuelle consiste à les utiliser dans notre système de routage :

import { lazy } from "react";

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

La fonction lazy de la bibliothèque React est utilisée pour importer les composants correspondant aux différentes vues. Chaque composant est importé dynamiquement à l'aide de l'instruction import, et les chemins relatifs vers les fichiers des composants sont spécifiés (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

En important ces composants avec le chargement paresseux, ils ne sont chargés que lorsqu'ils sont nécessaires, ce qui contribue à une expérience utilisateur plus efficace et réactive.