score:8

Accepted answer

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!

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

score:10

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

Related Query

More Query from same tag