React Routerにおけるクライアントサイドルーティング

このレッスンでは、シングルページアプリケーション(SPA)の重要な構成要素であるクライアントサイドルーティングを考察します。このようなルーティングにより、サーバーへのドキュメント追加リクエストなしにブラウザのURLを更新することが可能になります。

前のレッスンで作成したアプリケーションを起動してください。開発者パネルを開き、その中の'ネットワーク'タブ(Chromeの場合はNetwork)を開きます。リンクをクリックするたびに、documentに対するリクエストが見られます。つまり、サーバーに毎回documentをロードするよう要求しているのです。

それでは、このようなリクエストを取り除くためにReact Routerの利点を活用しましょう。そのために、アプリケーションのroot.jsxを開き、マークアップのaタグをLinkコンポーネントに置き換えます。まずはインポートを追加します：

次に、href属性を持つaタグを置き換えます。次のコードの断片の代わりに：

これで次のようなコードになります：

開発者パネルの'ネットワーク'タブを再度開き、アドレスバーにルートパスを設定してページを更新します。そしてリンクをクリックすると、documentは初期ロード時に1回だけリクエストされ、その後のクリックではサーバーへのリクエストがなくなっていることがわかります。