React component this.props is always empty

Question

I've followed a couple of examples in an attempt to get access to a parameter from a Route in the React component that handles it. However the result of console.log on this.props from inside the render or componentDidMount is always {} when I'd expect it to contain the gameId from the gamesView route.

client.js which starts the Router:

// HTML5 History API fix for local 
if (config.environment === 'dev') {
    var router = Router.create({ routes: routes });
} else {
    var router = Router.create({ routes: routes, location: Router.HistoryLocation });
}

router.run(function(Handler) {
    React.render(
        <Handler />,
        document.getElementById('app')
    );
});

routes.js with some routes removed for simplicity:

var routes = (
    <Route name='home' path='/' handler={app}>
        <DefaultRoute handler={home} location="/" />
        <Route name='gamesView' path='/games/:gameId' handler={gamesView} />
    </Route>
);

module.exports = routes;

...and app.js which wraps the other routes, I've tried it both with and without {...this.props} in the RouteHandler. If I console.log(this.props) from inside the render function here is also returns {}:

var App = React.createClass({
    render: function() {
        return (
            <div className='container'>
                <div className='row'>
                    <RouteHandler {...this.props} />
                </div>
            </div>
        );
    }
});

module.exports = App;

Finally the gamesView React component that I expect to see the props object. Here this.props is also {} and the following results in the error TypeError: $__0 is undefined var $__0= this.props.params,gameId=$__0.gameId;:

var GamesView = React.createClass({
    render: function() {
        var { gameId } = this.props.params;

        return (
            <div>
                <h1>Game Name</h1>
                <p>{gameId}</p>
            </div>
        );
    }
});

module.exports = GamesView;

Anybody have any ideas?

Answer 1

After discussing on the React Router (RR) Github it turned out this was due to me using an older version of RR (v0.11.6).

Looking at the example in the docs for that release it showed that I needed to use a Router.State mixin and then get the expected param via var gameId = this.getParams().gameId;.

Without upgrading RR the working version of my original example for GamesView becomes:

var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;

var GamesView = React.createClass({

    mixins: [ Router.State ],

    render: function() {
        var gameId = this.getParams().gameId;

        return (
            <div>
                <h1>Game Name</h1>
                <p>{gameId}</p>
            </div>
        );
    }
});

module.exports = GamesView;

Answer 2

You won't see those params until you are at the component defined in your router. App won't know anything about them. If you put the console.log(this.props.params) in your gamesView component, however, you should see them.