Wie bereits erwähnt, müssen die Komponenten importiert werden, die beim Navigieren zu bestimmten Pfaden in unserer Anwendung gerendert werden. Dafür verwenden wir die Funktion lazy aus der React-Bibliothek.

Die Syntax zur Verwendung der Funktion lazy zum Importieren einer Komponente ist wie folgt:

import { lazy } from 'react';

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

Die einzelnen Bestandteile dieser Syntax bedeuten:

• Zeile 1: Importiert die Funktion lazy aus der React-Bibliothek. Diese Funktion ermöglicht Code-Splitting und das Lazy Loading von Komponenten;
• Zeile 3: Deklariert eine Variable (View in diesem Fall) unter Verwendung der Funktion lazy. Die Funktion lazy erwartet eine Funktion als Argument, welche ein dynamisches Import-Statement zurückgibt. Das Import-Statement importiert die angegebene Datei/das Modul (in diesem Fall View.js) asynchron mit dem Schlüsselwort import. Durch das Umhüllen des Import-Statements mit lazy wird das Lazy Loading der Komponente View.js aktiviert.

Beispiel

Dieses Konzept wird nun auf unser Projekt angewendet, indem die Komponenten für verschiedene Ansichten importiert werden. Zu diesen Ansichten gehören die Startseite, die Über-uns-Seite und die Kontaktseite. Es ist zu beachten, dass diese Ansichten bereits erstellt wurden und unsere aktuelle Aufgabe darin besteht, sie im Routing zu verwenden:

import { lazy } from "react";

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

Die Funktion lazy aus der React-Bibliothek wird verwendet, um die Komponenten für verschiedene Ansichten zu importieren. Jede Komponente wird dynamisch mit dem import-Statement importiert, wobei die relativen Pfade zu den Komponenten-Dateien angegeben werden (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Durch das Importieren dieser Komponenten mittels Lazy Loading wird sichergestellt, dass sie nur bei Bedarf geladen werden. Dies trägt zu einer effizienteren und reaktionsschnelleren Benutzererfahrung bei.