Зосередьмося на впровадженні fallback-компонента. Цей крок є важливим для покращення взаємодії з користувачем, оскільки забезпечує візуальний зворотний зв'язок під час завантаження окремих веб-сторінок.

React надає компонент Suspense для цієї мети. Компонент Suspense дозволяє вказати fallback-компонент, який відображається під час завантаження основного контенту. Ось синтаксис для реалізації цієї функції:

import { Suspense } from "react";

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

• Рядок 1: Імпортуємо компонент Suspense з бібліотеки React;
• Рядки 5 та 7: Обгортаємо всі маршрути додатка компонентом Suspense. Це дозволяє відображати fallback-компонент під час завантаження будь-якого маршруту;
• Рядок 5: Компонент Suspense приймає проп fallback. У цьому випадку проп fallback встановлено як <LoaderComponent />, що визначає контент, який буде показано під час завантаження основного контенту.

Приклад

Тепер інтегруємо механізм fallback у наш додаток:

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

Наведений код демонструє інтеграцію механізму fallback у компоненті App. Використовуючи компонент Suspense з параметром fallback, встановленим як <Loader />, забезпечується відображення візуального зворотного зв'язку під час завантаження маршрутів.