私のウェブサイトの読み込みバーを React (create-react-app) / Redux で表示して、ページ読み込みのパーセンテージを示す最良の方法を見つけようとしています。
ただし、最初のページの読み込み中にこれを 1 回だけ表示し、その後のすべての ajax 呼び出しまたはページ遷移で読み込みバーが表示されないようにする必要があります。私は現在Pace.jsを使用していますが、それを行う方法は、ビルドの外側に Pace スクリプト/スタイルシートを含めることです。次に、index.html でインライン スクリプトを実行します。
Pace.once('done', () => remove specific pace stylesheet
しかし問題は、このコードが React バンドル コードの外にあるため、Redux と状態管理を利用できないことです。基本的に Redux で初期状態キーinitialPageLoadを設定したいtrueので、ユーザーが開始するルートに応じて、ローダー バーからの遷移が異なります。この移行の後、initialPageLoadfalse に設定して、以降のナビゲーションでローダーが実行されないようにします。
私が考えることができる 1 つの解決策は、Pace を React にインポートすることです。そうすれば、Redux にアクセスできるようになります。ただし、Pace を React のライフサイクル フックに含めるのは難しいと思います。Create React App リポジトリには、Pace に関するサイド ノートもあり、別の CDN として含めることを推奨しています。
React 用の Pace のようなライブラリは見つかりませんでした。唯一のプログレス ローダーは、それ自体を変更する必要がある単なるコンポーネントであるため、アドバイスをいただければ幸いです。