使用 React Router 将 Props 传递给处理程序组件

在利用 React Router 的 React.js 应用程序中，您可能会遇到需要将 props 传递给特定处理程序组件的场景。考虑以下应用程序结构：

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

var Index = React.createClass({
  render: function () {
    return (
        

            
Some header
            
        
    );
  }
});

var routes = (
  
    
    
  
);

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

要将属性传递给 Comments 组件，通常使用 等语法。然而，这种方法与 React Router 不兼容，React Router 期望处理程序组件是纯函数或类组件。

一个解决方案是创建一个包装器组件，封装处理程序组件和传入的 props：

// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return ;
  }
});

var routes = (
  
    
    
  
);

或者，您可以利用类组件和 this.props.route 对象来访问传递给父路由的 props：

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        Index - {this.props.route.foo}
      
    );
  }
}

var routes = (
  
);

通过在 / 路由上设置 foo 属性，您可以稍后在 Index 组件中使用 this.props.route.