React Router-将道具传递给子组件

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

I just had the same problem and found this answer in the React Router GitHub issues.

It suggests to pass the props to the Route component and access them from the component with this.props.route.* .

I just used if for my own application and find it very easy to use. ( Especially easier than the accepted answer ) This is the example from the answer (thanks to anjdreas ):

Routing:

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

Component:

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

Answer 2

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!

Answer 3

If you are using ES6, then it is also rather nice to inline a stateless functional component using ES6 arrow syntax ...

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

If your handler component cares about routed params or some other aspect of the route then be sure to pass down the props .

<Route name="info" handler={(props)=> <InfoPage pageTitle="Info Page" {...props} /> } />