第2回 簡単なReact.jsの使い方 （7/8）

７）ReactRouter

Ajax を利用していると、画面が変わってもURLが変わらないので、画面遷移後にブラウザのリロードを行うと、初期画面に戻ってしまいユーザビリティの観点からあまり好ましくありません。画面遷移が行われたらURLも合わせて変更した方が良いでしょう。この画面遷移を管理する仕組みとしてハッシュを用いる方法と、ブラウザのHistory APIを用いる方法があります。

ハッシュを用いる方法は、ハッシュに現在表示しているページの情報を格納し、どこのページにアクセスしたかを管理します。例えばhttp://example.com/#/menuはメニューを表示し、http://example.com/#/topであればトップページを表示するといった形です。ただし、この仕組みを実現するためにはJavaScriptでwindow.onhashchangeイベントをlistenし、その中でハッシュを取得する必要があります。

一方で、History APIを用いる方法では、ハッシュに値を設定するのではなく、URLを直接変更します。例えばhttp://example.com/menuでメニューを表示し、http://example.com/topでトップページを表示します。History APIを用いれば、画面遷移をせずにJavaScriptでアクセスしているURLを変更可能なので、この仕組みで画面遷移を管理できます。ただし、リロードした場合に、リロード前と同じ画面が表示されるように工夫しないといけません。

React.jsの仕組みの中でこれらの処理を上手く行ってくれるのが、ReactRouterです。どのURLがどの処理を行うのかを簡単に記述することができます。

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var Main = require('./components/Main');
 
module.exports = (
  <Route name="radar-scope" path="/">
    <Route name="radarScope" path="radarScope" handler={Main}/>
    <Route name="radarScopeYM" path="radarScope/:yearMonth" handler={Main}/>
    <Route name="radarScopeCategory" path="radarScope/category/:categoryId/:yearMonth" handler={Main}/>
    <DefaultRoute handler={Main} />
  </Route>
);

ReactRadarScopeでは上記のようにReactRouterを使用しており、アクセスしているURLに応じて、どのRouteが処理されるかが変わります。たとえば、/radarScopeにアクセスした場合にはname=radarScopeのRouteが実行され、/radarScope/201402とアクセスした場合にはname=radarScopeYMが実行されます。

上記のようにRouterを定義したのち、

var routes = require('./routes');
Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

とすると、ハッシュで画面遷移を管理してくれるようになります。一方、History APIを使用して画面遷移を管理したい場合には下記のようにします。

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

また、この仕組みを利用して画面遷移したい場合には、ReactRouterが提供している<Link/>タグを使用します。