React - 路由 lazyLoad 的使用（路由懒加载）

React - 路由 lazyLoad（路由懒加载）

lazy是React提供的懒（动态）加载组件的方法，React.lazy()路由组件代码会被分开打包，能减少打包体积、延迟加载首屏不需要渲染的组件依赖内置组件Suspense标签的fallback属性，给lazy加上loading指示器组件Suspense目前只和lazy配合实现组件等待加载指示器的功能

import {lazy, Suspense } from "react";import {NavLink, Route, Routes } from "react-router-dom";

通过React的lazy函数配合import()函数动态加载路由组件，路由组件代码会被分开打包

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

依赖内置组件Suspense标签的fallback属性，给lazy加上loading指示器

{/* 路由链接 */}<NavLink className="list-group-item active" to="/about">About</NavLink><NavLink className="list-group-item active" to="/home">Home</NavLink>

{/* 注册路由 */}<Suspense fallback={<h1>loading.....</h1>}><Routes><Route path="/about" element={<About />} /><Route path="/home" element={<Home />} /></Routes></Suspense>

Suspense的fallback属性可以是一个组件，该组件的引入不需要使用lazy()，直接引入即可

import Loading from "./Loading";

<Suspense fallback={<Loading />}><Routes><Route path="/about" element={<About />} /><Route path="/home" element={<Home />} /></Routes></Suspense>