在一个多路由项目中,页面加载时,所有的路由组件都会被加载
如果我们有很多个路由组件,但是用户只点击了几个,这就会有很大的消耗,因此我们需要做懒加载处理,我们点击哪个时,才去加载哪一个
而React当然想到了这一点,给我们提供了LazyLoad。
用法
首先我们需要从 react 库中暴露一个 lazy 函数
import React, { Component ,lazy} from 'react';
然后我们需要更改引入组件的方式,作为懒加载组件引入
const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))
路由组件加载需要时间,此时页面会白屏,需要指定一个loading组件作为新组件还没加载出来时的过渡,用Suspense包裹所有路由组件,在Suspense的fallback属性放入loading组件作为过渡
<Suspense fallback={<loading/>}><Route path="/home" component={Home}></Route><Route path="/about" component={About}></Route>
</Suspense>
注意: loading 必须提前引入,不能懒加载,否则就会陷入死循环
例:import Loading from ‘./Loading’
完整代码
import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'// import Home from './Home'
// import About from './About'import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))export default class Demo extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Suspense fallback={<Loading/>}>{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/></Suspense></div></div></div></div></div>)}
}