react-router-将道具传递给处理程序组件

react-router-将道具传递给处理程序组件 更新

自新版本发布以来

Route

，无需使用包装器就可以直接通过组件传递道具。例如，通过使用

render

prop。

零件：

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} />} />

---

旧版本

我的首选方式是包装

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