[解決済み] react-router - ハンドラコンポーネントにpropsを渡す

質問

React.jsを使ったアプリケーションで、以下のような構造になっています。 リアクト ルーター :

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

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>
);

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

にいくつかのプロパティを渡したい。 Comments コンポーネントを使用します。

(普通はこうする <Comments myprop="value" /> )

React Routerでそうするのが一番簡単で正しい方法なのか？

どのように解決するのですか？

アップデイト

新しいリリースでは、プロップスを直接 Route コンポーネントを使います。例えば を使って render プロップ .

コンポーネントです。

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

使用方法

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

Codesandboxの例

旧バージョン

私の好みの方法は Comments コンポーネントを作成し、そのラッパーをルートハンドラとして渡します。

これは、変更を適用したあなたの例です。

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      <Comments myprop="myvalue"/>
    );
  }
});

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

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

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