Wie bereits erwähnt, müssen wir die Komponenten importieren, die beim Navigieren zu bestimmten Pfaden in unserer Anwendung gerendert werden. Dazu 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 nimmt eine Funktion als Argument, und diese Funktion gibt ein dynamisches Import-Statement zurück. Das Import-Statement importiert die angegebene Datei/das angegebene 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

Wenden wir dieses Konzept auf unser Projekt an, indem wir die Komponenten für verschiedene Ansichten importieren. Diese Ansichten umfassen die Startseite, die Über-uns-Seite und die Kontaktseite. Es ist wichtig 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"));

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

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