react 路由按需加載

方法一：

從右到左，一級一級拋出

 

 

 

---

方法二：

(1)router文件夾asyncComponent.jsx創建文件

(2)填寫內容

(3)router文件夾的index文件引入asyncComponent.jsx

  asyncComponent.jsx文件內容（JS版）：

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});
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
  return AsyncComponent;
}

asyncComponent.tsx文件內容（TS版）：

import React, { Component, ComponentType } from 'react';
function asyncComponent<T>(importComponent: () => Promise<{ default: ComponentType<T> }>) {
  return class extends Component<T> {
    state: { component: ComponentType<T> | null }
    constructor(props: T) {
      super(props);
      this.state = {
        component: null
      }
    }
    async componentDidMount() {
      const { default: component } = await importComponent()
      this.setState(component)
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
};
export default asyncComponent