第一步,在组件中引入 lazy,Suspense
这两个api
import React, { Component,lazy,Suspense} from 'react'
导入我们的路由组件(示例):
import Home from './Home'
import About from './About '
使用lazy
函数对路由进行懒加载:
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))
在注册路由时,要用Suspense
标签对路由进行包裹:
<Suspense fallback={<h1>正在加载..<h1/>}>
{/* 注册路由 */}
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</Suspense>
Suspense
的作用是当点击路由后,路由组件内容因为一些原因不显示(网络原因),此时为用户展示其他内容,例如:加载中…,增进用户体验,也可以自定义组件进行展示,只需要把fallback
的内容替换成组件即可:
<Suspense fallback={<MyComponent/}>
</Suspense>