前回の記事でReactにおけるルーティングについてまとめ、その中でreact-routerの使い方を書きました。 今回は、Ruby on Railsアプリケーションでreact-routerを使う方法についてまとめます。

動作環境

今回の記事の内容は次の環境で動作を確認しています。 執筆時点でreact-routerはα版を使用している点にご注意ください。

  • Ruby on Rails v5.0.0.1
  • react-rails v1.8.2
  • react-router v4.0.0-alpha.3

ディレクトリ構成

JavaScriptを配置するディレクトリは、次のように設計しました。 今回は、例としてユーザ関連のコンポーネントを実装しています。

$ tree -a app/assets/javascripts

app/assets/javascripts
├── application.js
├── components
│   ├── UserForm.js
│   └── Users.js
├── components.js
└── routers
    └── UsersRouter.js

componentsディレクトリには、その名のとおりReactコンポーネントを配置します。 一方、react-routerでルーティング処理を定義したコンポーネントはroutersディレクトリに配置します。

それぞれの内容は、次の章に示します。

実装例

components.js

react-railsで初期化すると、components.jsが生成されます。 これは、application.jsから参照されている、Reactコンポーネント用のマニフェストファイルです。

今回Viewから直接参照するのはroutersディレクトリのみなので、これを登録しておきます。

app/assets/javascripts/components.js:

// require_tree ./routers

ルータ

基本的に前回の記事と同じ内容なので省略しますが、ルータは次のように実装します。

一点、UsersRouterはViewから参照することになるので、windowオブジェクトに登録する必要があります。

app/assets/javascripts/routers/UsersRouter.js:

import React, { Component } from 'react';
import { BrowserRouter, Match, Link } from 'react-router';
import Users from '../components/Users';
import UserForm from '../components/UserForm';

class UsersRouter extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to='/users'>Users</Link></li>
            <li><Link to='/users/new'>New User</Link></li>
          </ul>
          <Match exactly pattern='/users' component={Users} />
          <Match pattern='/users/new' component={UserForm} />
        </div>
      </BrowserRouter>
    );
  }
}

window.UsersRouter = UsersRouter;

コンポーネント

コンポーネントはいろいろと処理を追加していくことになりますが、ここでは最低限動作する例を示しています。

app/assets/javascripts/components/Users.js:

import React, { Component } from 'react';

export default class Users extends Component {
  render() {
    return (
      <span>users#index</span>
    );
  }
}

routes.rb

今回のキモとなるのがサーバ側のルーティング処理です。 フロント側で/users/newなどにアクセスした際、これらのリクエストを/usersで処理する必要があります。

このため、Ruby on Rails側のルーティングで次のような設定をしておきます。

config/routes.rb:

Rails.application.routes.draw do
  get '/users',       to: 'users#index'
  get '/users/*path', to: 'users#index'
end

ビュー

あとはreact-railsのヘルパメソッドを用いてルータを表示すれば完了となります。

app/views/users/index.html.erb:

<%= react_component('UsersRouter') %>

参考記事

おわりに

今回はSprocketsを用いた例を示しましたが、最近だとwebpackでフロント側を分けて実装する方法が主流となっています。

次回はこれについての記事を書きたいと思います。