Som nämnts tidigare behöver vi importera de komponenter som ska renderas när en användare navigerar till specifika sökvägar i vår applikation. För att uppnå detta använder vi funktionen lazy från React-biblioteket.

Syntaxen för att använda funktionen lazy för att importera en komponent är följande:

import { lazy } from 'react';

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

Här är vad varje del av denna syntax gör:

• Rad 1: Importerar funktionen lazy från React-biblioteket. Denna funktion möjliggör koddelning och lazy loading av komponenter;
• Rad 3: Deklarerar en variabel (View i detta fall) med hjälp av funktionen lazy. Funktionen lazy tar en funktion som argument, och denna funktion returnerar ett dynamiskt import-uttryck. Import-uttrycket importerar asynkront den angivna filen/modulen (i detta fall View.js) med hjälp av nyckelordet import. Genom att kapsla in import-uttrycket med lazy aktiverar vi lazy loading av komponenten View.js.

Exempel

Vi tillämpar detta koncept i vårt projekt genom att importera komponenterna för olika vyer. Dessa vyer inkluderar startsidan, om-sidan och kontaktsidan. Det är viktigt att notera att dessa vyer redan har skapats, och vår nuvarande uppgift är att använda dem i vår routing:

import { lazy } from "react";

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

Vi använder funktionen lazy från React-biblioteket för att importera komponenterna för olika vyer. Varje komponent importeras dynamiskt med hjälp av import-uttrycket, och vi anger de relativa sökvägarna till komponentfilerna (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Genom att importera dessa komponenter med lazy loading säkerställer vi att de endast laddas vid behov, vilket bidrar till en mer effektiv och responsiv användarupplevelse.