javascript - 如何设置在其他页面重新加载时将显示的默认屏幕？反应路由器

Question

当他等待页面从一个页面重新加载/路由到另一个页面时，我需要娱乐一下用户。我的应用程序正在使用ReactRouterand （显然）React。如何在目标页面重新加载时设置这样的页面作为占位符。说，旋转标志或类似的东西！可以用 React 做到吗？以及如何开发“其他人正在加载页面时的占位符”以便快速加载？请帮我弄清楚该怎么做！

function App() {
  return (
      <BrowserRouter>
        <Switch>
          {
            <>
              <Route exact path="/politics-we">
                <>
                  <Global>{device === "mobile" ? <WeMob /> : <We />}</Global>
                </>
              </Route>
              <Route exact path="/politics-our">
                <>
                  <Global>{device === "mobile" ? <OurMob /> : <Our />}</Global>
                </>
              </Route>

              <Route path="/mzs-popular">
                <>
                  <Global>
                    {device === "mobile" ? <MZsPopularMob /> : <MZsPopular />}
                  </Global>
                </>
              </Route>
              <Route exact path="/meme/write">
                <>
                  <Global>
                    {device === "mobile" ? (
                      <WritePostMob group="memecreate" title="Meme" />
                    ) : (
                      <WritePost group="memecreate" title="Meme" />
                    )}
                  </Global>
                </>
              </Route>
              <Route exact path="/mzs/write">
                <>
                  <Global>
                    {device === "mobile" ? (
                      <WritePostMob group="mzsgeneralcreate" title="MZs" />
                    ) : (
                      <WritePost group="mzsgeneralcreate" title="MZs" />
                    )}
                  </Global>
                </>
              </Route>
              <Route path="/terms">
                <>
                  <Global>
                    <Terms />
                  </Global>
                </>
              </Route>
              <Route path="/info">
                <>
                  <Global>
                    <Info />
                  </Global>
                </>
              </Route>
              <Route path="/user-page">
                <>
                  <Global>
                    <UserPage />
                  </Global>
                </>
              </Route>
              <Route path="/notice">
                <>
                  <Global>
                    <Notice />
                  </Global>
                </>
              </Route>
              <Route path="/policy">
                <>
                  <Global>
                    <Policy />
                  </Global>
                </>
              </Route>
              <Route exact path="/">
                <>
                  <Global>
                    {device === "mobile" ? <BeforeSignInMob /> : <SignIn />}
                  </Global>
                </>
              </Route>
            </>
          }
        </Switch>
      </BrowserRouter>
  );
}

标签： javascriptreactjsreact-routerreact-router-domreact-functional-component