Keskitytään nyt varakomponentin toteuttamiseen. Tämä vaihe on olennainen käyttäjäkokemuksen parantamiseksi tarjoamalla visuaalista palautetta silloin, kun tietyt verkkosivut latautuvat.

React tarjoaa tähän tarkoitukseen Suspense-komponentin. Suspense-komponentin avulla voidaan määrittää varakomponentti, joka näytetään pääsisällön latautuessa. Tässä on syntaksi tämän ominaisuuden toteuttamiseen:

import { Suspense } from "react";

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

• Rivi 1: Tuodaan Suspense-komponentti React-kirjastosta;
• Rivillä 5 ja 7: Kaikki sovelluksen reitit kääritään Suspense-komponentin sisään. Tämä mahdollistaa varakomponentin näyttämisen, kun mikä tahansa reitti latautuu;
• Rivi 5: Suspense-komponentti hyväksyy fallback-propin. Tässä tapauksessa fallback-prop on asetettu arvoon <LoaderComponent />, joka määrittää sisällön, joka näytetään pääsisällön latautuessa.

Esimerkki

Seuraavaksi integroidaan varamekanismi sovellukseen:

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>
    </>
  );
};

Annettu koodi havainnollistaa varamekanismin integrointia App-komponenttiin. Käyttämällä Suspense-komponenttia, jonka fallback-prop on määritetty arvolla <Loader />, varmistetaan visuaalisen palautteen näyttäminen reittien latautuessa.