我有以下结构为我的React.js应用程序使用React路由器:

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路由器最简单和正确的方法是什么?


当前回答

这是来自Rajesh的解决方案,没有yuji的不便评论,并为React Router 4更新。

代码是这样的:

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

注意,我使用渲染而不是组件。原因是为了避免不必要的重新挂载。我还将道具传递给该方法,并在Comments组件上使用对象展开操作符(ES7建议)。

其他回答

你可以通过将它们传递给<RouteHandler>(在v0.13.x中)或v1.0中的Route组件本身来传递道具;

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

(来自https://github.com/rackt/react-router/releases/tag/v1.0.0的升级指南)

所有子处理程序都将收到相同的一组道具——这可能有用,也可能没用,取决于具体情况。

你可以像这样通过<RouterHandler/>传入props:

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

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

这样做的缺点是你不加区别地传递道具。因此,Comments可能最终接收到的道具实际上是针对不同组件的,这取决于您的路由配置。这不是什么大问题,因为props是不可变的,但如果两个不同的组件都期望一个名为foo的道具,但值不同,这就会出现问题。

使用ES6,你可以让组件包装内联:

<路由路径= " / "组件={()= > <应用myProp = {someValue} / >} >

如果你需要通过孩子:

<路由路径="/"组件={(道具)=> <App myProp={someValue}>{道具。孩子}< /应用程序>}>

React路由器的问题是它会渲染你的组件,因此会阻止你传入道具。另一方面,导航路由器允许你渲染你自己的组件。这意味着您不必像下面的代码和附带的JsFiddle显示那样跳过任何障碍来传递道具。

var Comments = ({myProp}) => <div>{myProp}</div>;

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

摘自接受的回复中ciantic的评论:

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

在我看来,这是最优雅的解决办法。它的工作原理。帮助了我。