lazy%26Suspense

react-router-domv4.1.2版本，不能识别 React.lazy这种最新的懒加载方式
直接在 Route上使用会报错，会报错

LazyLoad.js

import React, { lazy, Suspense } from 'react';
import Loading from './Loading';
// import Home from './views/Home';
const List = lazy(() => import('./views/Home')) // 返回一个 Promise
function App() {
    return (
      <Suspense fallback={<Loading />}>
      <List />
    </Suspense>
  )
}

lazy组件封装

components/lazy.js

import React, { lazy, Suspense } from 'react';
import Loading from './Loading';
const List = lazy(() => import('./views/Home')) // 返回一个 Promise
function App(props) {
    const {component, ...args } = props
  let LAZY
  if (!component || component.constructor.name !== 'Promise') {
      LAZY = import('./error')
  }
  LAZY = lazy(() => {
      return new Promise(resolve => {
        resolve(component)
    })
  })
    return (
      <Suspense fallback={<Loading />}>
      <LAZY {...args}/>
    </Suspense>
  )
}

路由router.js 中使用

import LazyLoad from '@/component/lazy';
function App() {
    return (
         <div>
      <LazyLoad component={import('./views/List')}/>
    </div>
  )
}