今天给大家分享一个react异步加载组件的方法：

import React, {Component} from "react";

import {Modal} from "antd";

const AsyncComponent = loadComponent => (

class AsyncComponent extends Component {

state = {

Component: null

}

componentDidMount() {

const me = this;

if(this.hasLodaedComponent()) return;

loadComponent()

.then(module => module.default)

.then(Component => {

me.setState({Component})

})

.catch(err => {

console.log(err);

Modal.info({

title: "系统提示",

content: "系统已更新，请刷新页面",

onOk: ()=>{

me.reloadSys()

}

})

})

}

hasLoadedComponent() this.state.Component !== null;

reloadSys = () => window.document.location.reload();

render(){

const Component = this.state.Component 

return Component ? <Component {...this.props}> : null

}

}

)

    使用

import AsyncComponent from "./AsyncComponent";

const User = AsyncComponent(

() => import(/* webpackChunckName: User */ "./User")

)

const R = () => {

<Switch>

<Route path="./user" component={User} />

</Switch>

}