javascript - React 路由器 - 将路由上的 Prop 传递给子组件

Question

有人可以告诉我最好的方法吗？我想将页面标题 Prop 从我的路线传递到我的标题子组件中。这是我的路线:

var sampleApp= React.createClass({

render: function (){
    return (
        <div className="our-schools-app">
            <Header />
            <RouteHandler />
            <Footer />
        </div>
    );
},

});

var routes = (
<Route name="app" path="/" handler={OurSchoolsApp}>
    <DefaultRoute name="home" handler={HomePage}  />
    <Route name="add-school" handler={AddSchoolPage}  />
    <Route name="calendar" handler={CalendarPage}  />
    <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
    <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
    <Route name="info" handler={InfoPage} />
    <Route name="news" handler={NewsListPage} />
    <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
    <Route name="contacts" handler={ContactPage} />
    <Route name="contact-detail" handler={ContactDetailPage} />
    <Route name="settings" handler={SettingsPage} />
</Route>
);


Router.run(routes, function(Handler){
var mountNode = document.getElementById('app');
React.render(<Handler /> , mountNode);
});

我想像这样在路由中传递我的页面标题作为 Prop :

<Route name="info" handler={InfoPage} pageTitle="Info Page" />

到我的头部组件:

var Header = React.createClass({

render: function () {
    return (
            <div className="bar bar-header"
                style={this.getStyle()}>
                 <HomeButton />
                 <div className="h1 title">{this.props.pageTitle}</div>
            </div>
    )
}
});

但是 Prop 显示是空的，谁能帮忙？

Answer 1

我刚遇到同样的问题并找到了this answer在 React Router GitHub 问题中。

它建议将 props 传递给 Route 组件，并使用 this.props.route.* 从组件访问它们。

我只是将 if 用于我自己的应用程序，发现它非常易于使用。 (比接受的答案特别容易)这是答案中的示例(感谢 anjdreas):

路由:

React.render((
  <Router>
    <Route path="/" component={RootComp} myprop="foo">
        <Route path="foo" component={FooComp}>
           <Route path="bar" component={BarComp} />
        </Route>
    </Route>
  </Router>
), document.getElementById('example'));

组件:

class RootComp extends React.Component {
    render: {
        this.props.route.myprop // == "foo"
    }
}