React路由懒加载——lazy

原创已于 2024-01-17 17:10:47 修改 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2024-01-17 17:03:13 首次发布

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在React应用中使用`lazy()`和`Suspense`实现组件的懒加载，以及如何设置`fallback`属性以显示加载中状态。示例展示了如何在`BrowserRouter`和`react-router-dom`中运用这些技术。

1、lazy() 动态引入需要懒加载的组件

2、Suspense 来包裹需要懒加载的组件进行加载，设置fallback属性值实现加载中的效果

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))
 
...
return (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/About" component={About}/>
        ...
      </Switch>
    </Suspense>
  </Router>

注：如果fallback={<Loading/>}中是组件，该Loading组件用import ... from '....'即可