react-router v4を使って静的ページでもルーティングする

react-router

UEQareer Advent Calendar 2017、 21日目のエントリーです。

今回はReactのライブラリreact-routerを使って、GitHubなどの静的ページでもルーティングをしてみるという内容です。react-routerはv4を使っています。

全体のコードはここで見ることができます。

react-router API

react-routerにはAPIがたくさんありますが、その中でもよく利用するのはBrowserRouterやStaticRouterではないでしょうか。BrowserRouterはブラウザ上でのルーティング時に、StaticRouterはサーバーサイドレンダリング時に使われます。

HashRouter

HashRouter | react-router

上記APIのほかに、react-routerにはHashRouterというものが存在します。静的ページでルーティングするにはこのHashRouterを使います。

このようにRouteを設定するとindexページのurlは/#/、aboutページのurlは/#/aboutとなります。コード自体はBrowserRouterと同じように書けるのでとくに迷うことはありません。

hashType

デフォルトでは/#/pageのようにurlに含まれるハッシュの直後にスラッシュが入ります。hashTypeを指定することでハッシュタイプを変更することもできます。

注意

HashRouterはlocation.keyとlocation.stateをサポートしていません。そのため、location.keyなどを使用しない環境下でのみHashRouterが使えます。通常はBrowserRouterを使うので問題なとは思いますが、HashRouterを使う時には注意が必要です。

さいごに

これでGitHubのような静的ページでもreact-routerのHashRouterを使ってルーティングができるようになりました。