React router - pass props on routes to child components

Question

Can someone please tell me the best way to do this? I would like to pass a page title prop from my route into my header child component. Here are my routes:

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

I would like to pass the title of my page in the route as a prop like this:

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

To my header component:

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

But the props show as empty, can anyone help?

Answer 1

You can't currently (pre 1.0) do that with React Router. I believe one recommended way is to have wrapper components:

var BaseComponent = React.createClass({
     render: function() {
        return <p>{this.props.text}</p>
     }
});

var FancyComponent = React.createClass({
     return <BaseComponent text="fancy!" />
});

var EvenFancierComponent = React.createClass({
     return <BaseComponent text="SUPER fancy!" />
});

Then these routes:

<Route name="standard" handler={BaseComponent} />
<Route name="fancy" handler={FancyComponent} />
<Route name="superfancy" handler={EvenFancierComponent} />

However there's a discussion on this topic on the React Router github issues which provides good news:

I just wanted to note here that in the new API (see #1158) routes are just plain objects, so you can put whatever props you want on them. Your transition hooks will get a route arg and components will receive this.props.route, so you should be good to go.

It looks like that new 1.0 release is in beta and so should be coming fairly soon!