Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

11章ルーティング

Webの黎明期はほとんどのWebサイトがページ単位のリクエストしか受け付けませんでした。ユーザーはページを遷移するたびに異なるHTMLファイルをダウンロードしていたのです。Webサイト内でのユーザーの現在位置は明白で、常にブラウザのアドレスバーに表示されており、ユーザーは［戻る］ボタンと［進む］ボタンでページ間を遷移できました。また、Webサイトのどこにいようが、現在見ているページをブックマークして、あとで訪問することが可能でした。このようなページ遷移、もしくはサーバーサイドレンダリングを基本とするWebサイトでは、ブラウザのナビゲーションや履歴を実現するのに特別なライブラリは不要でした。

そして時は流れ、シングルページアプリケーション（Single Page Application：SPA）が台頭するにつれ、これらの機能を実現するのがとたんに難しくなりました。無理もありません。SPAではすべてのUIを単一のページで提供するため、従来のWebサイトとは動作原理がまったく異なるからです。SPAでは、ひとたびページがロードされると、それ以降はJavaScriptでページの一部のみを書き換えることで、見た目のページ遷移を実現しています。そのため、ブラウザの履歴やブックマーク、［戻る］ボタンと［進む］ボタン等の機能を実現するには、ルーティングライブラリが必要になります。ルーティングとは、SPAにおいてユーザーのリクエストのエンドポイントを定義することです†1。これらのエンドポイントは、実際のファイルとは対応せず、ブラウザの提供するlocationやhistoryオブジェクトと連動します†2。SPAでは、ユーザーがエンドポイントを指定することで、ルーティングの情報をもとにJavaScriptでUIが構築されるのです。 ...