Lad os fokusere på implementeringen af en fallback-komponent. Dette trin er afgørende for at forbedre brugeroplevelsen ved at give visuel feedback, mens specifikke websider indlæses.

React stiller Suspense-komponenten til rådighed til dette formål. Suspense-komponenten gør det muligt at angive en fallback-komponent, der vises, mens hovedindholdet indlæses. Her er syntaksen for at implementere denne funktion:

import { Suspense } from "react";

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

• Linje 1: Suspense-komponenten importeres fra React-biblioteket;
• Linje 5 og 7: Alle app-ruterne omsluttes med Suspense-komponenten. Dette muliggør visning af en fallback-komponent, mens en hvilken som helst rute indlæses;
• Linje 5: Suspense-komponenten accepterer en fallback-prop. I dette tilfælde er fallback-proppen sat til <LoaderComponent />, hvilket angiver det indhold, der skal vises, mens hovedindholdet indlæses.

Eksempel

Nu integreres en fallback-mekanisme i vores 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>
    </>
  );
};

Den viste kode demonstrerer integrationen af en fallback-mekanisme i App-komponenten. Ved at anvende Suspense-komponenten med en fallback angivet som <Loader />, sikres det, at visuel feedback vises, mens ruterne indlæses.