時間経過による遷移の修正おわりに参考Reactアプリでのページ遷移の実装が不適切だったので修正してみた#React若槻龍太2021.10.05この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。IoT事業部の若槻です。今回は、以前のエントリで紹介したReactアプリケーションのサンプルでのページ遷移の実装が不適切だったので修正してみました。以前の修正前のエントリというのが以下の記事です。DevelopersIO上記エントリ中で紹介しているアプリケーションを下記のCodeSandboxの環境にデプロイしています。(実際に開いて利用できます。CodeSandboxこのアプリケーションではStartページでボタンクリックによるページ遷移が行われ、さらにThankYouページで時間経過によるページ遷移が行われます。Toolのネットワークコンソールを見て分かる通り、ページ遷移のたびにページ読み込みが走っています。Application)であり、初回のページ読み込み時にアプリケーションのすべてのページリソースがブラウザにダウンロードされます。よってアプリケーション内のページ遷移(別のパスへの移動)であれば再読み込みをすることなく遷移が可能です。以前の実装では実装が不適切であったためページ遷移のたびにページ読み込みが行われ不要なレイテンシーが発生していました。修正後の実装そこで、ページ遷移のたびにページ読み込みを行わないように実装を適切に修正したものが下記です。CodeSandboxの環境にデプロイしています。"/path"を使用するのでなく、ReactのRouting機能をきちんと使う、これに尽きました。"/path"を使用すると新しくURLからページを問答無用で読み込んでしまうためです。ボタンクリックによる遷移の修正StartページからThankYouページへのボタンクリックによるページ遷移では、react-router-domのLinkを<Button>コンポーネントで使用することによりRoutingを行うように修正しました。<div>{'アンケートを開始します。StartPage;時間経過による遷移の修正ThankYouページからStartページへの時間経過によるページ遷移では、react-router-domのuseHistoryを使用することによりRoutingを行うように修正しました。<div>{'お疲れさまでした。<div>{'3秒後にスタートページに戻ります。ThankYouPage;下記は、修正後の実装のアプリケーションのページ遷移の様子です。Toolのネットワークコンソールを見て分かる通り、ページ遷移をしてもページ再読み込みは行われていません。修正前と比べて明らかに遷移後のページ表示が早くなっています。おわりに以前のエントリで紹介したReactアプリケーションのサンプルでのページ遷移の実装が不適切だったので修正してみました。後で気付いて修正前の実装はSPAを使うメリットをまるで活かせておらずひどいなと思いました。二ヶ月半も掛かってしまいましたが気付けて良かったです。