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

来源：互联网发布：淘宝网变形金刚玩具编辑：程序博客网时间：2024/06/05 07:36

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

阅读全文

1 0