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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)