react路由懒加载lazyLoad
懒加载是指在项目中浏览器第一次加载项目时,如果不使用懒加载技术,则第一次浏览器加载项目时进行读取并下载所有路由组件资源,所以当组件很多时,就会造成浏览器卡死状态;如果使用了懒加载技术,那么每当跳转一个路由,才会吧此路由对应的组件进行下载读取资源并渲染,所以渲染性能就比较好。
路由组件的lazyLoad
看例子:
// 引入lazy函数,懒加载函数,以及要配合Suspense组件一起使用才能实现懒加载
import { lazy, Suspense } from "react"
import { Routes, Route, Link } from "react-router-dom"
// 注意:loading加载页面不能用懒加载方式引入
import Loading from "./component/Loading"
// 不使用懒加载引入组件,不推荐
// import Home from './pages/Home' //引入Home组件
// import About from './pages/About'
// 使用懒加载引入About组件,es6模块导入语法import也可以是函数方式引用
const About = lazy(() => import("./pages/About"))
const Home = lazy(() => import("./pages/Home"))
export default function App() {
return (
<div>
<h1>react Router!</h1>
<div>
<div className='nav'>
{/* Link组件会后会被渲染成a标签,to属性渲染成href属性 */}
<div>
<Link to="/home">点我展示home</Link>
</div>
<div>
<Link to="/about">点我展示about</Link>
</div>
</div>
<div>
{/* 在实现懒加载时,必须使用Suspense将路由组件包裹路由子组件 */}
{/* fallback值的是在还没有成功加载路由组件时,会先执行fallback的内容,然后当加载完毕之后才会渲染路由子组件 */}
<Suspense fallback={<Loading />}>
{/* 必须要用Routes组件包裹,在react5中使用switch组件,这两个组件功能类似,都用来包裹Route路由子组件。Switch的作用是当path匹配到一个component之后,将不会再想下继续匹配,提高了程序效率 */}
<Routes>
{/* 注册路由 */}
{/* 在react-router6中,使用element关键字,在react-router5中使用component,注意区别! */}
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />}></Route>
<Route path='/' element={<Home />}></Route>
</Routes>
</Suspense>
</div>
</div>
</div >
)
}