La oss fokusere på å implementere en fallback-komponent. Dette steget er avgjørende for å forbedre brukeropplevelsen ved å gi visuell tilbakemelding mens bestemte nettsider lastes inn.

React tilbyr Suspense-komponenten for dette formålet. Suspense-komponenten lar oss angi en fallback-komponent som vises mens hovedinnholdet lastes. Her er syntaksen for å implementere denne funksjonaliteten:

import { Suspense } from "react";

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

• Linje 1: Vi importerer Suspense-komponenten fra React-biblioteket;
• Linje 5 og 7: Vi omslutter alle appens ruter med Suspense-komponenten. Dette gjør det mulig å vise en fallback-komponent mens en rute lastes inn;
• Linje 5: Suspense-komponenten aksepterer en fallback-prop. I dette tilfellet er fallback satt til <LoaderComponent />, som angir innholdet som skal vises mens hovedinnholdet lastes inn.

Eksempel

Nå skal vi integrere en fallback-mekanisme i appen vår:

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 oppgitte koden viser integrasjonen av en fallback-mekanisme i App-komponenten. Ved å bruke Suspense-komponenten med en fallback satt til <Loader />, sikrer vi at visuell tilbakemelding vises mens rutene lastes inn.