react---react router4.0路由中如何异步动态加载组件，webpack使用require.ensure()生成异步chunk

1、bundle.js

import {Component} from 'react';
export default class Bundle extends Component {
  constructor(props) {
      super(props);
      this.state = {
          mod: null
      };
  }

  load = props => {
      this.setState({
          mod: null
      });
      props.load(mod => {
          this.setState({
              mod: mod ? mod : null
          });
      });
  }

  componentWillMount() {
      this.load(this.props);
  }

  render() {
      return this.state.mod ? this.props.children(this.state.mod) : null
  }
}

2、组件

新建几个路由组件并导出；
如 Home.jsx,About.jsx,List.jsx…

3、require.ensure

import Bundle from './bundle.js';

const Home=(props)=>(
    <Bundle load={
        (cb)=>{
            require.ensure([],require=>{
                cb(require('components/Home').default)
            },'home')
        }
    }>
      {(Componet)=><Component {...props}/>}
    </Bundle>
)

const List=(props)=>(
    <Bundle load={
        (cb)=>{
            require.ensure([],require=>{
                cb(require('components/List').default)
            },'list')
        }
    }>
      {(Componet)=><Component {...props}/>}
    </Bundle>
)

const About=(props)=>(
    <Bundle load={
        (cb)=>{
            require.ensure([],require=>{
                cb(require('components/About').default)
            },'about')
        }
    }>
      {(Componet)=><Component {...props}/>}
    </Bundle>
)

class Routes extends React.Component{
    render(){
        return (
            <Switch>
                <Route  path='/' exact component={Home} />
                <Route  path='/about' exact component={About} />
                <Route  path='/list' exact component={List} />
            </Switch>
        )   
    }
}

export default Routes