Fokus auf die Implementierung einer Fallback-Komponente. Dieser Schritt ist entscheidend zur Verbesserung der Benutzererfahrung, indem visuelles Feedback bereitgestellt wird, während bestimmte Webseiten geladen werden.

React stellt hierfür die Komponente Suspense zur Verfügung. Die Suspense-Komponente ermöglicht es, eine Fallback-Komponente anzugeben, die angezeigt wird, solange der Hauptinhalt geladen wird. Nachfolgend das Syntaxbeispiel zur Implementierung dieser Funktion:

import { Suspense } from "react";

const App = () => {
  return (
    <Suspense fallback={<LoaderComponent />}>
      {/* Routes */}
    </Suspense>
  );
};

• Zeile 1: Import der Komponente Suspense aus der React-Bibliothek;
• Zeilen 5 und 7: Alle App-Routen werden mit der Suspense-Komponente umschlossen. Dadurch kann eine Fallback-Komponente angezeigt werden, während eine Route geladen wird;
• Zeile 5: Die Suspense-Komponente akzeptiert eine fallback-Eigenschaft. In diesem Fall ist die fallback-Eigenschaft auf <LoaderComponent /> gesetzt, wodurch der anzuzeigende Inhalt während des Ladens des Hauptinhalts festgelegt wird.

Beispiel

Nun wird ein Fallback-Mechanismus in die App integriert:

import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";
import Loader from "../Loader/Loader";

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

const App = () => {
  return (
    <>
      <Suspense fallback={<Loader />}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contacts" element={<ContactsPage />} />
        </Routes>
      </Suspense>
    </>
  );
};

Der bereitgestellte Code demonstriert die Integration eines Fallback-Mechanismus innerhalb der App-Komponente. Durch die Verwendung der Suspense-Komponente mit einem als fallback angegebenen <Loader /> wird sichergestellt, dass während des Ladens der Routen ein visuelles Feedback angezeigt wird.