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?

score 10 · Answer 1 · answered Aug 24 '16 at 15:15

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

Why is `this.props.route` undefined on my child component? I have the exact same thing. — zok, Apr 03 '17 at 10:04
I am also getting undefined `this.props.route` while console its value — Rohit Luthra, May 04 '17 at 02:42

score 8 · Accepted Answer · answered Jun 16 '15 at 16:01

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!

Chris W. · Answer 3 · 2017-02-15T18:53:37.047

4

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

edited Feb 15 '17 at 18:53

answered Dec 08 '16 at 00:23

Chris W.

37,583
36
99
136

1

Thank's for mention `props` case, without it router not worked for me. – Vitaliy Smolyakov Feb 15 '17 at 07:21
For React Router v4 use `render` instead of `handler`. – igor Sep 04 '17 at 17:26

React router - pass props on routes to child components

3 Answers3

Linked