Zoals eerder vermeld, moeten we de componenten importeren die worden weergegeven wanneer een gebruiker naar specifieke paden in onze applicatie navigeert. Hiervoor gebruiken we de functie lazy uit de React-bibliotheek.

De syntaxis voor het gebruik van de lazy functie om een component te importeren is als volgt:

import { lazy } from 'react';

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

Dit doet elk onderdeel van deze syntaxis:

• Regel 1: Importeert de lazy functie uit de React-bibliotheek. Deze functie maakt code-splitting en lazy loading van componenten mogelijk;
• Regel 3: Declareert een variabele (View in dit geval) met behulp van de lazy functie. De lazy functie neemt een functie als argument, en deze functie retourneert een dynamische import-instructie. De import-instructie importeert het opgegeven bestand/module (in dit geval, View.js) asynchroon met het import sleutelwoord. Door de import-instructie te omhullen met lazy, activeren we lazy loading voor de View.js component.

Voorbeeld

We passen dit concept toe op ons project door de componenten voor verschillende weergaven te importeren. Deze weergaven omvatten de homepagina, aboutpagina en contactpagina. Het is belangrijk om te weten dat deze weergaven al zijn aangemaakt en dat onze huidige taak is om ze te gebruiken in onze routing:

import { lazy } from "react";

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

We gebruiken de lazy functie uit de React-bibliotheek om de componenten voor verschillende weergaven te importeren. Elke component wordt dynamisch geïmporteerd met behulp van de import instructie, en we geven de relatieve paden naar de componentbestanden op (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Door deze componenten met lazy loading te importeren, zorgen we ervoor dat ze alleen worden geladen wanneer dat nodig is, wat bijdraagt aan een efficiëntere en responsievere gebruikerservaring.