react 懒加载和错误边界

import React, {Component,lazy, Suspense} from 'react'
const About = lazy(() => import(/*webpackChunkName: 'about'*/'./child.jsx'))
class Layout extends Component {
  state = {
    error: false
  }
  static getDerivedStateFromError () {
    return {
      error: true
    }
  }
  render () {
    if (this.state.error) {
      return <div>error</div>
    }
    return (
      <div>
        home
        <Suspense fallback={<div>加载中</div>}>
          <About />
        </Suspense>
      </div>
    )
  }
}