React Routerのチュートリアル Lesson6

前回の続き。

hinathy.hatenablog.com

Lesson6 - Params

今回のお題は、パラメータの渡し方です。

例えば、以下のようなURLを考えてみます。

/repos/reactjs/react-router
/repos/facebook/react

これらのパラメータは、以下の形式にマッチします。

/repos/:userName/:repoName

これらのパラメータは、this.props.params[name]のように取得することができます。

渡されたパラメータを画面に表示してみる

まずは、Repoコンポーネントを作成します。 このコンポーネントは、渡されたパラメータrepoNameを単に表示するのみです。

import React from 'react';

class Repo extends React.Component {

  render() {
    return (
      <div>
        <h2>{this.props.params.repoName}</h2>
      </div>
    );
  }
  
}

export default Repo;

次に、Routeをapp/index.jsxに追加します。

... (snip) ...

ReactDOM.render((
   ... (snip) ...
        <Route path="/repos/:userName/:repoName" component={Repo} />
   ... (snip) ...
  ),
  document.body.appendChild(document.createElement('div'))
);

Repoを表示するリンクを追加する

app/components/repos.jsxに、Repoを表示するリンクを追加します。

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';

export default class Repos extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Repos</h2>
        <ul>
          <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
          <li><Link to="/repos/facebook/react">Facebook</Link></li>
        </ul>
      </div>
    );
  }

}

リンクをクリックすると、それぞれのrepoNameが表示されるはずです。

まとめ

• パラメータ名は、コロンで始まる変数名を含め、Routeに割り付けてあげる。

ソースコード

github.com