Som nævnt tidligere, skal vi importere de komponenter, der skal gengives, når en bruger navigerer til specifikke stier i vores applikation. For at opnå dette benytter vi funktionen lazy fra React-biblioteket.

Syntaksen for at bruge lazy-funktionen til at importere en komponent er som følger:

import { lazy } from 'react';

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

Her er, hvad hver del af denne syntaks gør:

• Linje 1: Importerer funktionen lazy fra React-biblioteket. Denne funktion muliggør kodeopdeling og lazy loading af komponenter;
• Linje 3: Deklarerer en variabel (View i dette tilfælde) ved hjælp af funktionen lazy. lazy-funktionen tager en funktion som argument, og denne funktion returnerer en dynamisk import-sætning. Import-sætningen importerer asynkront den angivne fil/modul (i dette tilfælde View.js) ved hjælp af nøgleordet import. Ved at omslutte import-sætningen med lazy aktiveres lazy loading af View.js-komponenten.

Eksempel

Lad os anvende dette koncept i vores projekt ved at importere komponenterne til forskellige visninger. Disse visninger omfatter forsiden, om-siden og kontakt-siden. Det er vigtigt at bemærke, at disse visninger allerede er oprettet, og vores nuværende opgave er at benytte dem i vores routing:

import { lazy } from "react";

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

Vi bruger funktionen lazy fra React-biblioteket til at importere komponenterne til de forskellige visninger. Hver komponent importeres dynamisk ved hjælp af import-sætningen, og vi angiver de relative stier til komponentfilerne (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Ved at importere disse komponenter med lazy loading sikrer vi, at de kun indlæses, når det er nødvendigt, hvilket bidrager til en mere effektiv og responsiv brugeroplevelse.