React Loadable处理动态加载Route的Loading效果

Loadable 是一个高阶组件，是一个动态导入加载组件的高阶组件。

yarn add react-loadable

简单粗暴，简单来看看使用示例：

import Loadable from 'react-loadable';

function MyLoadingComponent({ error, pastDelay }) {
  if (error) {
    return <div>Error!</div>; // 加载错误时的提示模块
  } else if (pastDelay) {
    return <div>Loading...</div>; 
  } else {
    return null; // 加载时间短于pastDelay（默认200ms）则不显示Loading动画
  }
}

const LoadableAnotherComponent = Loadable(
  () => import('./another-component'),
  MyLoadingComponent,
  300 // （修改pastDelay时间）
);
// LoadableAnotherComponent.preload();// 预加载接口，根据业务需求是否启用
class MyComponent extends React.Component {
  render() {
    return <LoadableAnotherComponent/>;
  }
}

但是我们总不能再每个页面都配置一遍，这样根本不方便，来看看如何进行一下小封装。

// Loadable.js
import L from 'react-loadable';

function MyLoadingComponent({ error, pastDelay }) {
  if (error) {
    return <div>Error!</div>; // 加载错误时的提示模块
  } else if (pastDelay) {
    return <div>Loading...</div>; 
  } else {
    return null; // 加载时间短于pastDelay（默认200ms）则不显示Loading动画
  }
}

const Loadable = opts =>{
	L({
		MyLoadingComponent,
		300, // 闪屏时间
		...opts
	})

}

export default Loadable

然后Router页面使用

import Loadable from './Loadable.js'

const AsyncHome = Loadable({
	loader: ()=> import('../components/Home')
})

<BrowserRouter>
	<Switch>
		<Route path="/home" component={AsyncHome}></Route>
	</Switch>
</BrowserRouter>