12

次のコンポーネント ツリーがあります。

<BrowserRouter>
  <Suspense fallback={<h1>MyFallback</h1>}>
    <Switch>
      <Route component={HomePage} path="/" exact />
      <Route
        component={lazy(() => import('./pages/Auth/Login'))}
        path="/auth/login"
        exact
      />
    </Switch>
  </Suspense>
</BrowserRouter>

React.Suspenseローディングフォールバックを表示するために使用していました。ただし、現在のルート全体を削除してフォールバックを表示する通常のサスペンス読み込みフォールバックを使用する代わりに、現在のページの上部に進行状況バーを表示したいと考えています。

たとえば、ロード中のページのロード進行状況を示すために NProgress を追加するにはどうすればよいですか?

おそらく、新しい React の Concurrent Mode がそれを助けることができるでしょうか? :)

4

4 に答える 4

1 
import { useEffect } from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

export default function TopProgressBar() {
  useEffect(() => {
    NProgress.configure({ showSpinner: false });
    NProgress.start();

    return () => {
      NProgress.done();
    };
  });

  return "";
}
于 2021-07-13T07:08:56.640 に答える