Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Pass props to the handler component in react-router

react-router has pretty much emerged as a clear winner when it comes to routing libraries for React.

However, as you would have already noticed, there isint a very clear way on how to pass down props to your route handlers.

For example, in the following setup, the top level component – App, simply renders whatever children are configured as per the route.

const App = React.createClass({
    displayName: 'App',

    render() {
        return this.props.children;

const Index = React.createClass({
    displayName: 'Index',

    render() {
        return <div>Welcome</div>;

    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Index} />
), document.getElementById('app'));

Now, what if the Index component needs a prop to render?

const Index = React.createClass({
    displayName: 'Index',

    propTypes: {
        appName: React.PropTypes.string.isRequired

    render() {
        return <div>Welcome to {this.props.appName}</div>;

In the above case, the parent App.jsx needs to pass down a required prop to its child. The way to achieve this in react-router is by using React.cloneElement in App.jsx.

const App = React.createClass({
    displayName: 'App',

    render() {
        return React.cloneElement(
            {appName: 'Foo'}

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

  • tutorialhorizon

    the itself does not transfer unknown props to the children. I usually treat the App.jsx as the entry point for any of the application logic instead of the route mappings.
    Another way that I see it is – if the router itself can read the values from somewhere and pass it down to the app assuming these are mostly static values, can the App read it from the same place instead of expecting it as the prop?

  • David Choy

    This is an excellent explanation, so concise! Also see the following doc, which helped me avoid errors by checking for children before cloning (&& statement on line 48):

  • Myron Robertson

    For some reason I found your explanation simple, but your solution complicated. I don’t like working that hard, so here’s another easier way to solve the same problem. Add a state prop to the Route component to persist states to child’s props. For my example, I’m assuming that the code is broken up into several .jsx/.js files, and you’re using something like Webpack and Babel for compilation and builds. Sorry for the ES6, it’s easier to write it this way for me…


    import React from ‘react’;
    import {Router, Route, browserHistory} from ‘react-router’;
    import {ROUTES} from ‘./constants/routes’;
    import {IndexPage} from ‘./pages/index_page’;
    import {UserPage} from ‘./pages/user_page’;

    const App = React.createClass({
    // …[setup code such as componentDidMount, componentDidUnmount, etc.]

    render: function() {
    // just an example but ideally you could just pass down the entire state for your store. Components are responsible for there own data consumption, or they could be dumb and only handle what you pass it. I guess it’s preference, but I like smart components. This for example

    let indexProps = {data: {signed_in: true, token: ‘abcd1234’, email: ‘[email protected]’}}

    // could be replaced with this (in my world, of course)

    let profilePageProps = {this.props}

    // I don’t believe that the cost is to much. However, if the data set is extremely large then maybe lazy loading data using an Ajax client like Superagent with Promise’s would be a better solution.

    // Here’s the return. I use constants to store my routes, so they are all maintained in a single file. There is one more prop which I didn’t mention called `query`. It takes an object of key value pairs that will be converted into a query string. ie. {age: 24} outputs ?age=24 . So using constants are perfectly fine for storing static routes that only ever change if your api/app changes.

    return (

    module.exports = {App};

    More info:

    If using Google Chrome, there’s an awesome plugin in the Chrome store for React Development, that lets you inspect your components in the developer tools. Using that, you’ll be able to inspect your IndexPage component quickly, and view its properties. Your state object is nested within:


    Hope this helps anyone else coming to this page looking for a solution other than React.cloneElement…