React Router のハンドラーコンポーネントにプロパティを渡すにはどうすればよいですか?

React Router のハンドラー コンポーネントにプロパティを渡す

React Router を活用する React アプリケーションでは、動的にロードされるハンドラー コンポーネントにプロパティを渡す必要があります。

次の React Router 構成を考えてみましょう:

<code class="javascript">var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

Comments コンポーネントにプロパティを渡すには、次のように Index コンポーネントを拡張できます:

<code class="javascript">class Index extends React.Component { // using babel here

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);</code>

このアプローチにより、次のアクセスが可能になります。 foo プロパティを Index コンポーネント内で直接使用し、実質的に Comments コンポーネントに渡します。

以上がReact Router のハンドラーコンポーネントにプロパティを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。