Concentriamoci sull'implementazione di un componente di fallback. Questo passaggio è fondamentale per migliorare l'esperienza utente fornendo un feedback visivo durante il caricamento di specifiche pagine web.

React mette a disposizione il componente Suspense per questo scopo. Il componente Suspense consente di specificare un componente di fallback che viene mostrato mentre il contenuto principale è in fase di caricamento. Ecco la sintassi per implementare questa funzionalità:

import { Suspense } from "react";

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

• Riga 1: Si importa il componente Suspense dalla libreria React;
• Righe 5 e 7: Si racchiudono tutte le route dell'applicazione all'interno del componente Suspense. Questo permette di mostrare un componente di fallback durante il caricamento di qualsiasi route;
• Riga 5: Il componente Suspense accetta una prop fallback. In questo caso, la prop fallback è impostata su <LoaderComponent />, che specifica il contenuto da visualizzare mentre il contenuto principale è in caricamento.

Esempio

Ora integriamo un meccanismo di fallback nella nostra applicazione:

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

Il codice fornito dimostra l'integrazione di un meccanismo di fallback all'interno del componente App. Utilizzando il componente Suspense con una prop fallback impostata su <Loader />, si garantisce la visualizzazione di un feedback visivo durante il caricamento delle route.