1、lazy() 动态引入需要懒加载的组件
2、Suspense 来包裹需要懒加载的组件进行加载,设置fallback属性值实现加载中的效果
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))
...
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/About" component={About}/>
...
</Switch>
</Suspense>
</Router>
注:如果fallback={<Loading/>}中是组件,该Loading组件用import ... from '....'即可