5.1.2シングルページアプリケーション(SPA)は、ひとつのページでコンテンツを切り替えます。画面が素速く遷移でき、ユーザー体験を高めるための仕組みです。URLが変わらないと、遷移した画面の中のひとつを見ることがむずかしくなります。Routerの役割です。3×3のマス目をつくる」01「Reactアプリケーションのひな形をつくる」をお読みください)。react-router-domreact-router-domに備わるルーターはふたつで、<BrowserRouter>と<HashRouter>です。URLのもち方と、Webサーバー側の設定に違いがあります。<BrowserRouter>が用いるパスは、通常のURLです。サーバーがそのために正しく設定されていなければなりません。それに対して、<HashRouter>はURLに添えるハッシュでルーティングされます(http://example.com/#/your/page)。サーバー側の設定は要りません。今回使うのは、<BrowserRouter>です。ルーター(<BrowserRouter>)の中に<Route>コンポーネントでpathを定め、ルーティングするコンポーネントはその子として差し込みます。モジュールsrc/App.jsは、つぎのように書き替えてください。URLを指定したパスに書き替えれば、コンポーネントがルーティングされるでしょう(図001)。リンクで遷移するパスを手入力するのでなく、リンクで遷移させましょう。このとき用いるのは、<a>要素ではなく<Link>コンポーネントです。リンク先パスはtoで定めてください。モジュールsrc/App.jsには、つぎのように書き加えます。これでリンクをクリックすれば、コンポーネントが切り替わります。モジュールsrc/App.cssにより、以下のコード001のような簡単なスタイルを割り当てました。パスの検索と一致ホームのページは、ルート(/)に定めるのが普通でしょう。そこで<Link>のパスをつぎのように書き替えます。すると、他のリンクを選んでも、ルートのコンポーネント(Home)もつねに表示されてしまうのです(図002)。これは、ルーティング先の決め方に原因があります。<Route>のpathは、与えられたURLと頭の部分が一致していればよく、しかもひとつとは決まっていないのです。URLを"/products/something"としてもProductsコンポーネントは表示されます。ルート(/)のコンポーネントは、必ず表示されるということです。/></Route></Router>);}図003■pathの指定部分が一致したRouteはすべて表示されるひとつの対応の仕方は、<Route>に、つぎのようにexactを加えることです。これで、厳密にルートパス(/)でないかぎりHomeコンポーネントは表示されません。その代わり、存在しないたとえば/homeはルーティング先がないことになります。パスが一致した最初のルートを選ぶ<Switch>の中に<Route>コンポーネントを定めれば、pathの一致した最初のコンポーネントだけがルーティングされます。複数表示されることはありません。この場合、ルートパス(/)を最後の<Route>のpathに置けば、デフォルトのルートになるということです。つぎのコードでは、"/home"などまったく存在しないURLに対してもルート(Home)のコンポーネントが表示されます(図004)。/></Route></Switch></Router>);}図004■存在しないURLにはルートパスのコンポーネントが表示される書き上げたアプリケーションモジュールsrc/components/Square.jsの記述全体は、つぎのコード002のとおりです。併せて、CodeSandboxに以下のサンプル001を公開しました。ルーティングパスを厳密に一致させる厳密に一致したパスにルーティングさせたい場合について、簡単に解説を加えておきます。<Route>すべてにexactを添えれば済むのはたしかです。そのままでは、一致しない場合にページが空白となってしまいます。それを避けるには、最後の<Route>にエラー(404)ページを置くとよいでしょう。そのときは、つぎのようにpathは与えません。確認のため、以下のサンプル002をCodeSandboxに公開しました。