React 如何添加路由懒加载

1.第一种自己定义组件在加载时调用

1.1在工具类文件夹utils下面创建一个asyncComponent.js文件写入一下代码

import React, { Component } from 'react'
 
export const asyncComponent = (fn) => {
    // return 一个组件
    return class MyComponent extends Component {
        constructor() {
            super()
            this.state = {
                C: null
            }
        }
        // 调用组件时会渲染当渲染完成后会执行componentDidMount这时候会调用fn
        componentDidMount() {
            // fn是一个异步的promise调用这时给组件进行复制重新渲染
            fn().then(module => {
                // console.log(mod);
                this.setState({
                    C: module.default
                    // module.default就是页面引进的真正要加载的组件
                })
            })
        }
        render() {
            let { C } = this.state
            return (
                <div>
                    {C ? <C {...this.props}></C> : null}
                    {/*{...this.props}是为了解决当前组件C没有Route所携带的信息无法跳转  但是如果想要必须接受,在App.js中route将信息传给Login,而Login就是此时类asyncComponent return的组件 所以进行结构赋值*/}
                </div>
            )
        }
    }
}

1.2在App.js中引入组件

import {asyncComponent} from "./utils/asyncComponent"

在App.js中改写路由方式

let Login=asyncComponent(()=>{return import("./pages/Login/Login")})

在App.js路由规则中定义路由规则

2.使用React自带的 Suspense,lazy实现懒加载

2.1在App.js中引入

import React,{Suspense,lazy} from 'react'

在定义的路由规则外面添加Loding..