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路由规则中定义路由规则

<Route path="/login" component={Login}></Route>

 

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

 

2.1在App.js中引入

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

在定义的路由规则外面添加<Suspens fallback={<div>Loding..</div></Supens>}在div中的内容在加载中显示，可以自定义

 {/* 路由出口 */}
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
           {/* 路由规则  这里的MyRoute是自己定义的路由组件用于做路由拦截，判断是否登录*/}
           <Route path="/login" component={Login}></Route>
           <MyRoute path="/index" component={Index}></MyRoute>
           <MyRoute path="/movie" component={Movie}></MyRoute>
           <MyRoute path="/movieDetail" component={MovieDetail}></MyRoute>
           <MyRoute path="/food" component={Food}></MyRoute>
           <MyRoute path="/foodDetail/:foodId" component={FoodDetail}></MyRoute>
           {/* 重定向 */}
           <Redirect to="/login"></Redirect>
        </Switch>
      </Suspense>