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>