ReactJS入門@ES6:ReactRouter編 #React

対象者：私を含むReact初心者
前：ReactJS入門@ES6:コンポーネント編
次：ReactJS入門@ES6:Redux編

前提

ReactRouterのbrowserHistoryを使用する。

追記：下記mod_rewriteの設定は私の環境では必要ありませんでした。
逆に必須だったのは、<base>の設定でした。

index.htmlにリクエストを投げるためApacheのmod_rewriteモジュールを使用。

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule (.*) index.html [L,QSA]
</ifModule>

私の環境ではHTMLにベースの指定が必要だった。

<body>
  <base href="/" />
</body>

サンプル概要

作成するサンプルの概要。
トップ画面 ▶ ユーザ画面 ▶ アイテム画面というシンプルな構成。

画面	説明	URL
トップ	ヘッダを表示	http://ex/
ユーザ	指定したユーザ情報を表示	http://ex/user/{userName}
アイテム	指定したユーザのアイテムを表示	http://ex/user/{userName}/item/{itemId}

追記：書き忘れていましたが、
今回はURLパラメータを処理するサンプルとなっているので、
{userName}や{itemID}の部分をブラウザのURL入力欄で適当に書き換えても動作します。

ルーティングの設定

実際のコードとは異なるが、今回は雰囲気を掴みやすくするために、
ルーティングの設定から記述する。

今回はReactDOM.renderに直接指定している。

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="user/:userName" component={User}>
        <Route path="item/:itemId" component={Item} />
      </Route>
    </Route>
  </Router>
), document.getElementById('wrapper'));

コンポーネント作成

今回は1コンポーネント1画面という前提で作成。
画面移動用のボタンはReactRouterのLinkクラスで描画する。

<Link to={'/sample'} activeClassName="active">Sample</Link>

URLパラメータはthis.props.paramsから取得する。

Appコンポーネントを作成

ルートコンポーネント

class App extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to="/" activeClassName="active">Index</Link></li>
          <li><Link to="/user/kinjo" activeClassName="active">User:KINJO</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

Userコンポーネントを作成

URLパラメータで指定したuserNameを表示するコンポーネント
文字列中の変数を展開するために、ES6のテンプレートリテラルを使用しています。

class User extends React.Component {
  render() {
    const { userName } = this.props.params;

    return (
      <div className="User">
        <h1>User Name: {userName}</h1>
        <ul>
          <li><Link to={`/user/${userName}/item/1`} activeClassName="active">Item:1</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

Itemコンポーネントを作成

URLパラメータで指定したItemIdを表示するコンポーネント

class Item extends React.Component {
  render() {
    const { userName, itemId } = this.props.params;
    return (
      <div className="Item">
        <h2>User Name: {userName}</h2>
        <h2>Item ID: {itemId}</h2>
      </div>
    )
  }
}

親コンポーネントの役目は子コンポーネントを表示すること

ユーザ画面（User）を表示しているのは、
親コンポーネント（App）の{this.props.children}であり、
アイテム画面（Item）を表示しているのは、
親コンポーネント（User）の{this.props.children}である。

動的な画面遷移を行う

contextTypesでrouterを設定することにより、
this.context.router.push();が使えるようになる。

EX :

class Item extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  };
  componentWillMount() {
    //this.context.router.push('/user/unknown');
  }
  render() {
    const { userName, itemId } = this.props.params;
    return (
      <div className="Item">
        <h2>User Name: {userName}</h2>
        <h2>Item Id: {itemId}</h2>
      </div>
    )
  }
}