Låt oss fokusera på att implementera en reservkomponent. Detta steg är avgörande för att förbättra användarupplevelsen genom att ge visuell återkoppling medan specifika webbsidor laddas.

React tillhandahåller komponenten Suspense för detta ändamål. Suspense-komponenten gör det möjligt att ange en reservkomponent som visas medan huvudinnehållet laddas. Här är syntaxen för att implementera denna funktion:

import { Suspense } from "react";

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

• Rad 1: Vi importerar komponenten Suspense från React-biblioteket;
• Rad 5 och 7: Vi omsluter alla appens routes med Suspense-komponenten. Detta gör det möjligt att visa en reservkomponent medan någon route laddas;
• Rad 5: Suspense-komponenten accepterar en fallback-prop. I detta fall är fallback-propen satt till <LoaderComponent />, vilket anger innehållet som ska visas medan huvudinnehållet laddas.

Exempel

Nu ska vi integrera en reservmekanism i vår 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 medföljande koden visar integrationen av en reservmekanism i App-komponenten. Genom att använda Suspense-komponenten med en fallback angiven som <Loader /> säkerställs att visuell återkoppling visas medan routes laddas.