Som nevnt tidligere, må vi importere komponentene som skal gjengis når en bruker navigerer til bestemte stier i applikasjonen vår. For å oppnå dette, benytter vi funksjonen lazy fra React-biblioteket.

Syntaksen for å bruke lazy-funksjonen til å importere en komponent er som følger:

import { lazy } from 'react';

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

Forklaring av hver del av denne syntaksen:

• Linje 1: Importerer funksjonen lazy fra React-biblioteket. Denne funksjonen muliggjør kode-splitting og lazy loading av komponenter;
• Linje 3: Deklarerer en variabel (View i dette tilfellet) ved å bruke lazy-funksjonen. lazy-funksjonen tar en funksjon som argument, og denne funksjonen returnerer en dynamisk import-setning. Import-setningen importerer spesifisert fil/modul (i dette tilfellet, View.js) asynkront ved bruk av import-nøkkelordet. Ved å pakke import-setningen inn i lazy, aktiveres lazy loading for View.js-komponenten.

Eksempel

Vi anvender dette konseptet i prosjektet ved å importere komponentene for ulike visninger. Disse visningene inkluderer startsiden, om-siden og kontaktsiden. Det er viktig å merke seg at disse visningene allerede er opprettet, og vår nåværende oppgave er å benytte dem i rutingen:

import { lazy } from "react";

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

Vi bruker lazy-funksjonen fra React-biblioteket for å importere komponentene for ulike visninger. Hver komponent importeres dynamisk ved hjelp av import-setningen, og vi angir relative stier til komponentfilene (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Ved å importere disse komponentene med lazy loading, sikrer vi at de kun lastes inn ved behov, noe som bidrar til en mer effektiv og responsiv brukeropplevelse.