Как работает ленивый роутинг (lazy loading) в React Router DOM?

Ленивый роутинг позволяет загружать компоненты маршрутов "по требованию", а не включать их в начальный бандл. Это особенно полезно для больших приложений, где не все страницы требуются сразу.

Пример реализации:

Импортируйте компоненты лениво с помощью React.lazy:

import { lazy } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

Используйте <Suspense> для отображения индикатора загрузки:

import { Routes, Route } from 'react-router-dom';
import { Suspense } from 'react';
const App = () => (
	<Suspense fallback={<div>Loading...</div>}>
		<Routes>
			<Route path="/" element={<Home />} />
			<Route path="/about" element={<About />} />
		</Routes>
	</Suspense>
);

Как это работает:

• Когда пользователь переходит на маршрут /about, компонент About загружается динамически.

• Это снижает нагрузку на начальную загрузку приложения.