react路由懒加载lazyLoad

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 >)
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！