Come menzionato in precedenza, è necessario importare i componenti che verranno renderizzati quando un utente naviga verso percorsi specifici nell'applicazione. Per ottenere questo risultato, si utilizza la funzione lazy dalla libreria React.

La sintassi per utilizzare la funzione lazy per importare un componente è la seguente:

import { lazy } from 'react';

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

Significato di ciascuna parte della sintassi:

• Riga 1: Importa la funzione lazy dalla libreria React. Questa funzione consente il code splitting e il caricamento asincrono dei componenti;
• Riga 3: Dichiara una variabile (View in questo caso) utilizzando la funzione lazy. La funzione lazy accetta una funzione come argomento, che restituisce un'istruzione di importazione dinamica. L'istruzione di importazione importa in modo asincrono il file/modulo specificato (in questo caso, View.js) utilizzando la parola chiave import. Avvolgendo l'istruzione di importazione con lazy, si abilita il caricamento asincrono del componente View.js.

Esempio

Applicazione di questo concetto al progetto tramite l'importazione dei componenti per le diverse viste. Queste viste includono la pagina principale, la pagina "about" e la pagina dei contatti. È importante notare che queste viste sono già state create e il compito attuale consiste nell'utilizzarle nel routing:

import { lazy } from "react";

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

Si utilizza la funzione lazy dalla libreria React per importare i componenti delle diverse viste. Ogni componente viene importato dinamicamente tramite l'istruzione import, specificando i percorsi relativi ai file dei componenti (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Importando questi componenti tramite il caricamento asincrono, si garantisce che vengano caricati solo quando necessario, contribuendo a un'esperienza utente più efficiente e reattiva.