react扩展2_lazyLoad

F班的小夏同学

于 2022-07-28 19:40:27 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lxk116688/article/details/126042124

react 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了React中如何实现路由组件的懒加载，通过使用`lazy()`函数延迟加载组件，并结合`Suspense`组件提供加载反馈。示例展示了如何设置`Home`和`About`组件的懒加载路由，以及使用`NavLink`进行导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由组件的懒加载是在点击的时候再将组件加载进去。
使用lazy（）将组件导入：

const Home=lazy(()=> import('./Home/index') )
const About=lazy(()=> import('./About/index') )

使用Suspense将注册路由包裹：

<Suspense fallback={<Loading/>}>
       <Routes>
          <Route path='/about' element={<About/>} />
          <Route  path='/home/*' element={<Home/>} />
       </Routes>     
</Suspense>

完整版

import React, { Component, lazy, Suspense } from 'react'
import {Route, Routes,NavLink} from 'react-router-dom'
import './home.css'

import Loading from './Loading'
const Home=lazy(()=>
    import('./Home/index')
)
const About=lazy(()=>
    import('./About/index')
)

export default class Demo extends Component {
  render() {
    return (
      <div>
        <div>
          {/* 在react中靠路由链接实现切换组件 */}
        <NavLink to='/about'>about</NavLink>
        <NavLink to='/home'>Home</NavLink>
        </div>
        <div>
          {/* 注册路由 */}
          <Suspense fallback={<Loading/>}>
          <Routes>
          <Route path='/about' element={<About/>} />
          <Route  path='/home/*' element={<Home/>} />
          </Routes>     
          </Suspense>    
        </div>
      </div>
    )
  }
}