React 如何添加路由懒加载

我会带着你远行 2023-10-06 23:57 25阅读 0赞

**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'

在定义的路由规则外面添加<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>

![28c000cdacc44f1f881eb3cbfc562dd9.png][]

[28c000cdacc44f1f881eb3cbfc562dd9.png]: https://img-blog.csdnimg.cn/28c000cdacc44f1f881eb3cbfc562dd9.png