react路由跳转动画Suspense

React Router v5.1.0 引入了一个新的组件 `Suspense`，它可以用来包裹异步加载的组件或者路由，当异步加载的组件还没有加载完成时，`Suspense` 可以展示一些占位符，当加载完成时再渲染实际的组件。

在路由跳转时，我们可以将异步加载的组件包裹在 `Suspense` 中，并设置一个 `fallback` 属性，用来展示路由跳转动画或者占位符。

例如，我们可以创建一个 `FadeIn` 组件用来展示路由跳转动画，并将异步加载的路由组件包裹在 `Suspense` 中：

import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import FadeIn from './FadeIn';
import Home from './Home';
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Suspense fallback={<FadeIn>加载中...</FadeIn>}>
          <Route path="/about" component={About} />
        </Suspense>
      </Switch>
    </div>
  );
}

在上面的代码中，我们使用 `React.lazy` 来异步加载 `About` 组件，并将其包裹在 `Suspense` 中。当 `About` 组件还没有加载完成时，`Suspense` 会展示一个 `fallback` 属性中的占位符，即 `FadeIn` 组件展示的路由跳转动画。

需要注意的是，`Suspense` 组件只能包裹直接渲染的组件或者路由，不能包裹函数式组件或者其他非直接渲染的组件。另外，React Router v5.1.0 引入的 `Suspense` 组件只能用于异步加载的组件，不能用于同步加载的组件。