react-router-dom之异步加载路由方式

npm install react-loadable

//入口文件中不在调用之前的RouterTest组件而是调用这个异步组件
//获取路由参数的方法需要进行调整要在对应的再组件中调用react-router-dom中的withRouter方法
//然后export default connect(null,null)(withRouter(RouterTest))
import React from 'react'
import Loadable from 'react-loadable'
const LoadingRouterTest = Loadable({
	loader:() => import('./RouterTest.js'),
	loading () {return <div>正在加载</div>}
})
 
export default () => <LoadingRouterTest />

<Route path="/LoadingRouterTest:id" component={LoadingRouterTest}></Route>
          <Route path="/RouterTest:id" component={RouterTest}></Route>

export default connect(null,null)(withRouter(RouterTest))

//手写异步加载高阶组件
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;
}

import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import asyncComponent from '@/utils/asyncComponent';
 
import home from "@/pages/home/home";
const record = asyncComponent(() => import("@/pages/record/record"));
const helpcenter = asyncComponent(() => import("@/pages/helpcenter/helpcenter"));
const production = asyncComponent(() => import("@/pages/production/production"));
const balance = asyncComponent(() => import("@/pages/balance/balance"));
 
// react-router4 不再推荐将所有路由规则放在同一个地方集中式路由，子路由应该由父组件动态配置，组件在哪里匹配就在哪里渲染，更加灵活
export default class RouteConfig extends Component{
  render(){
    return(
      <HashRouter>
        <Switch>
          <Route path="/" exact component={home} />
          <Route path="/record" component={record} />
          <Route path="/helpcenter" component={helpcenter} />
          <Route path="/production" component={production} />
          <Route path="/balance" component={balance} />
          <Redirect to="/" />
        </Switch>
      </HashRouter>
    )
  }
}

 /**注解

   * 路由表中：

   * const record = asyncComponent(() => import("@/pages/record/record"));

   * <Route path="/record" component={record} />

   * --------------------------------------------------------------

   * >>1

   * asyncComponent函数返回了一个组件AsyncComponent,AsyncComponent被record变量接收；

   * asyncComponent函数参数是一个()=>import('xxx')方法，该方法是用来引入文件的，返回的的是一个promise对象。

   * >>2

   * 当react路由匹配到对应路径,AsyncComponent组件挂在，参数()=>import('xxx')方法在其挂在后执行，将异步加载的组件更改到状态，并再次重新渲染。

  */