2017.12.25 プログラミング知識

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はサーバーサイドレンダリング時に使われます。

import {
 BrowserRouter,
 Route
 Switch,
} from 'react-router';

<BrowserRouter>
  <Switch>
    <Route exact path="/about" component={AboutComponent} />
    <Route path="/" component={IndexComponent} />
  </Switch>
</BrowserRouter>
import {
 StaticRouter,
 Route
 Switch,
} from 'react-router';

<StaticRouter location={url} context={context}>
  <Switch>
    <Route exact path="/about" component={AboutComponent} />
    <Route path="/" component={IndexComponent} />
  </Switch>
</StaticRouter>

HashRouter

HashRouter | react-router

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

import {
  HashRouter,
  Route
  Switch,
} from 'react-router';
 
<HashRouter>
  <Switch>
    <Route exact path="/about" component={AboutComponent} />
    <Route path="/" component={IndexComponent} />
  </Switch>
</HashRouter>

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

hashType

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

/*
indexページ -> /#/
aboutページ -> /#/about
*/
<HashRouter hashType="slash">
　　<App />
</HashRouter>
/*
indexページ -> /#
aboutページ -> /#about
*/
<HashRouter hashType="noslash">
　　<App />
</HashRouter>
/*
indexページ -> /#!
aboutページ -> /#!/about
*/
<HashRouter hashType="hashbang">
　　<App />
</HashRouter>

注意

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

さいごに

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

RECOMMENDこちらの記事も人気です。