load.jsjavascript
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.jsjava
import Loadable from './assets/load'; const Indexpages = Loadable(()=>import('./pages/Indexpages/index'))