Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Implementierung Einer Fallback-Komponente | Grundkonzepte von React Router
React Router

bookImplementierung Einer Fallback-Komponente

Konzentrieren wir uns auf die Implementierung einer Fallback-Komponente. Dieser Schritt ist entscheidend, um die Benutzererfahrung zu verbessern, indem beim Laden bestimmter Webseiten visuelles Feedback bereitgestellt wird.

React stellt hierfür die Komponente Suspense zur Verfügung. Mit der Suspense-Komponente kann eine Fallback-Komponente angegeben werden, die angezeigt wird, während der Hauptinhalt geladen wird. Die Syntax zur Implementierung dieser Funktionalität lautet:

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 Komponente Suspense 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 integrieren wir einen Fallback-Mechanismus in unsere App:

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 zeigt 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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 4.17

bookImplementierung Einer Fallback-Komponente

Swipe um das Menü anzuzeigen

Konzentrieren wir uns auf die Implementierung einer Fallback-Komponente. Dieser Schritt ist entscheidend, um die Benutzererfahrung zu verbessern, indem beim Laden bestimmter Webseiten visuelles Feedback bereitgestellt wird.

React stellt hierfür die Komponente Suspense zur Verfügung. Mit der Suspense-Komponente kann eine Fallback-Komponente angegeben werden, die angezeigt wird, während der Hauptinhalt geladen wird. Die Syntax zur Implementierung dieser Funktionalität lautet:

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 Komponente Suspense 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 integrieren wir einen Fallback-Mechanismus in unsere App:

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 zeigt 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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7
some-alt