問題タブ [pace]

私のウェブサイトの読み込みバーを React (create-react-app) / Redux で表示して、ページ読み込みのパーセンテージを示す最良の方法を見つけようとしています。

ただし、最初のページの読み込み中にこれを 1 回だけ表示し、その後のすべての ajax 呼び出しまたはページ遷移で読み込みバーが表示されないようにする必要があります。私は現在Pace.jsを使用していますが、それを行う方法は、ビルドの外側に Pace スクリプト/スタイルシートを含めることです。次に、index.html でインライン スクリプトを実行します。

しかし問題は、このコードが React バンドル コードの外にあるため、Redux と状態管理を利用できないことです。基本的に Redux で初期状態キーinitialPageLoadを設定したいtrueので、ユーザーが開始するルートに応じて、ローダー バーからの遷移が異なります。この移行の後、initialPageLoadfalse に設定して、以降のナビゲーションでローダーが実行されないようにします。

私が考えることができる 1 つの解決策は、Pace を React にインポートすることです。そうすれば、Redux にアクセスできるようになります。ただし、Pace を React のライフサイクル フックに含めるのは難しいと思います。Create React App リポジトリには、Pace に関するサイド ノートもあり、別の CDN として含めることを推奨しています。

React 用の Pace のようなライブラリは見つかりませんでした。唯一のプログレス ローダーは、それ自体を変更する必要がある単なるコンポーネントであるため、アドバイスをいただければ幸いです。

POST を使用するカスタム ajax 関数を作成しました。ajax が停止して戻るまで、ペース プログレス バーを表示する必要があります。必要な構成がないため、GET 要求に対しては正常に機能しています。ajax 呼び出しで Pace を表示するメソッドを設定する方法を知る必要があります。

すべての ajax リクエストに対する Jquery。

次の axios 呼び出しがあります。

ただし、Pace.start() は起動せず、Pace.restart() は axios からの停止信号を待つ代わりに短時間点滅します。私は何を間違っていますか？