React路由懒加载的方式之一

第一步，在组件中引入 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>