Suspended！React刷新错误？看看这颗仙丹妙药

2023-04-21 04:36:05

React Suspense 组件：应对页面加载缓慢的秘密武器

当你浏览 React 应用程序时，是否遇到过页面刷新、路由切换时出现的恼人错误消息？这种情况往往发生在网速较慢或页面内容较大的情况下，让你不得不等待繁琐的加载过程。不过，别担心，今天我们将介绍一颗仙丹妙药——React Suspense 组件，它将拯救你的页面，让你告别恼人的错误提示。

Suspense 组件：加载占位符的守护神

Suspense 组件就像一个贴心的守卫，在你等待路由组件加载时，它会自动显示一个占位符，让你不会看到加载错误提示。它就像一个舞台上的替补演员，当明星（路由组件）还未出场时，它会先上场为观众展示一个友好的占位符，直到明星做好准备。

如何使用 Suspense 组件

使用 Suspense 组件非常简单，只需要将路由组件用它包裹起来即可。代码示例如下：

import React, { Suspense } from "react";
import { Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route path="/home" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Suspense>
  );
};

export default App;

在上述代码中，HomePage 和 AboutPage 路由组件被包裹在了 Suspense 组件中。因此，当这两个路由组件尚未加载完成时，Suspense 组件会自动显示占位符 "Loading..."。

自定义占位符：点亮创意的画板

Suspense 组件不仅限于显示简单的文本占位符，你还可以发挥你的创意，使用更复杂的占位符，例如加载动画。代码示例如下：

import React, { Suspense } from "react";
import { Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Suspense fallback={<div className="loading"><span>Loading...</span></div>}>
      <Switch>
        <Route path="/home" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Suspense>
  );
};

export default App;