Як вже згадувалося раніше, необхідно імпортувати компоненти, які будуть відображатися при переході користувача за певними шляхами у нашому застосунку. Для цього використовується функція lazy з бібліотеки React.

Синтаксис використання функції lazy для імпорту компонента виглядає наступним чином:

import { lazy } from 'react';

const View = lazy(() => import('./View.js'));

Пояснення кожної частини цього синтаксису:

• Рядок 1: Імпортується функція lazy з бібліотеки React. Ця функція дозволяє розділяти код та здійснювати ліниве завантаження компонентів;
• Рядок 3: Оголошується змінна (View у цьому випадку) з використанням функції lazy. Функція lazy приймає функцію як аргумент, яка повертає динамічний оператор імпорту. Оператор імпорту асинхронно імпортує вказаний файл/модуль (у цьому випадку, View.js) за допомогою ключового слова import. Обгортаючи оператор імпорту у lazy, ми забезпечуємо ліниве завантаження компонента View.js.

Приклад

Застосуємо цю концепцію у нашому проєкті, імпортуючи компоненти для різних представлень. До цих представлень належать головна сторінка, сторінка "Про нас" та сторінка контактів. Важливо зазначити, що ці представлення вже створені, і наше поточне завдання — використати їх у маршрутизації:

import { lazy } from "react";

const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));

Ми використовуємо функцію lazy з бібліотеки React для імпорту компонентів різних представлень. Кожен компонент імпортується динамічно за допомогою оператора import, і ми вказуємо відносні шляхи до файлів компонентів (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Імпортуючи ці компоненти з використанням лінивого завантаження, забезпечується їх завантаження лише за необхідності, що сприяє більш ефективній та чутливій взаємодії користувача із застосунком.