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'))