./component/AsyncComponent
import React, { Component } from "react";
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({
component: component
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
}
return AsyncComponent;
}
./App.js
import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import AsyncComponent from './components/AsyncComponent'
const Login = AsyncComponent(() => import("./pages/Login"))
const CloudView = AsyncComponent(() => import("./pages/CloudView"))
const Home = AsyncComponent(() => import("./pages/Home"))
export default class App extends Component {
render() {
return (
<div style = {{height:'100%'}}>
{/* 一级路由注册 */}
<Switch>
<Route exact path='/' render={() => <Redirect to='/login'/>}></Route>
<Route path='/login' component={Login}></Route>
<Route path='/cloudview' component={CloudView}></Route>
<Route path='/home' component={Home}></Route>
</Switch>
</div>
)
}
}