如何在反应路由器的路由之间显示一个简单的加载指示器？

当我们在使用 React 路由器时，经常会遇到页面之间的切换需要加载数据的情况。为了提高用户体验，我们可以在页面之间加入一个加载指示器，在数据加载完成之前，一直显示在页面上。本文将介绍如何实现在 React 路由器之间显示一个简单的加载指示器。

步骤

在开始之前，请确保已经安装了 React 和 React 路由器。

1. 安装第三方库

我们可以使用第三方库 React Spinners 来实现加载指示器的效果。我们可以使用 npm 命令或者 yarn 命令安装该库。

npm install react-spinners --save

或者

yarn add react-spinners

2. 创建加载指示器组件

为了实现加载指示器的效果，我们需要创建一个组件 LoadingIndicator。在该组件中，我们将使用 React Spinners 的 DotLoader 组件。

import React from "react";
import { css } from "@emotion/core";
import { DotLoader } from "react-spinners";

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

const LoadingIndicator = () => {
  return (
    <div className="sweet-loading">
      <DotLoader css={override} size={150} color={"#123abc"} loading={true} />
    </div>
  );
};

export default LoadingIndicator;

3. 在路由之间加入加载指示器

在上面的代码中，我们已经创建了一个 LoadingIndicator 组件。现在，在我们的路由器中，我们可以将该组件与路由组件一起使用，以在路由之间显示加载指示器。

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import LoadingIndicator from "./LoadingIndicator";
import Home from "./Home";
import About from "./About";

function App() {
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  return (
    <BrowserRouter>
      {loading ? (
        <LoadingIndicator />
      ) : (
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </Switch>
      )}
    </BrowserRouter>
  );
}

export default App;

在上面的代码中，我们通过 useState 钩子来控制加载指示器的显示。在其中使用 React.useEffect() 延时 2 秒，然后设置加载状态为 false，这样加载指示器就会消失，我们的路由组件就会显示。

结论

在本文中，我们通过使用 React Spinners 库来实现在 React 路由器之间显示一个简单的加载指示器。我们的示例中，我们简单地使用了 DotLoader 组件，但实际上，React Spinners 库有很多其他可用的组件，可以根据不同的需求选择不同的组件。