dva/dynamic LoadingComponent 属性实现路由切换的加载效果

前言

我们使用的dvajs项目中我们一般使用dva/dynamic进行路由动态加载解决引入models的问题，但是随之而来的一个新的问题就出现了，当每次进入新的页面的时候总会有一段js执行的时间是空白的状态对于客户的体验感不是很好。

---

---

LoadingComponent属性

在dva/dynamic中有一个隐藏属性LoadingComponent属性，这个属性是知道js执行完成渲染页面前显示的组件。

嘿嘿嘿 是不是突然觉得很一切都变得简单了起来~

二、使用步骤

1.引入加载组件

import Loading from './routes/Loading'

2.定义组件

const IndexRC = dynamic({
  app,
  LoadingComponent: Loading,
  component: () => import('./routes/index')
});

3.路由配置

<Router history={history}>
  <Switch>
    <Route path="/" exact component={IndexRC} />
  </Switch>
</Router>

总结

经过以上步骤，我们每次在加载页面或者改变路由是都会进行加载Loading的组件，而Loading的组件的界面就需要各位进行自我发挥了~