React项目实现路由按需加载

1. 自定义组件

import React from "react";

export default function asyncComponent(importComponent){
          
   
    class AsyncComponent extends React.Component{
          
   
        constructor(props){
          
   
            super(props);
            this.state = {
          
    component: null }
        }
        
        componentDidMount(){
          
   
            importComponent().then(mod=>{
          
   
                this.setState({
          
   
                    component: mod.default?mod.default:mod
                })
            })
        }

        render(){
          
   
            const C = this.state.component;
            return C?<C {
          
   ...this.props} />:null;
        }
    }

    return AsyncComponent;

}

2. 路由组件 （已安装，react-router-dom依赖）

import React from "react";
import asyncComponent from "../components/importComponent.js";
import {
          
    Route, Switch, Router } from "react-router-dom";
import {
          
    createBrowserHistory } from "history";

const Home = asyncComponent(()=>import(../views/home/home.js));
const Detail = asyncComponent(()=>import(../views/detail/detail.js));

const browserHistory = createBrowserHistory();

export default class AppRouter extends React.Component {
          
   
  render() {
          
   
    return (
      <Router history={
          
   browserHistory}>
        <Switch>
            <Route exact path="/" component={
          
   Home}/>
            <Route exact path="/detail" component={
          
   Detail}/>
        </Switch>
      </Router>
    );
  }
}