react-loadable路由懒加载

load.js

import Loadable from 'react-loadable';
import './styles/load.styl'
// 按需加载组件
export default function withLoadable (comp) {
    return Loadable({
        loader:comp,
        loading:(props)=>{
            let msg
            if (props.error) {
                return <p>加载错误，请刷新</p>
            } else if (props.timedOut) {
                return <p>加载超时</p>
            } else if (props.pastDelay) {
                return(
                  <div className='loading-mask'>
                    <div className='container'>
                      <img className='loading-img' src={require('../images/loading.png')} />
                      <p>加载中...</p>
                    </div>
                  </div>
                )
            } else {
                return null;
            }
        },
        timeout:10000
    })
}

 

index.js

import Loadable from './assets/load';

const Indexpages = Loadable(()=>import('./pages/Indexpages/index'))

 

转载于:https://www.cnblogs.com/anxiaoyu/p/10879981.html