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?

@pkurek I believe I should be able to use the [spread operator](https://facebook.github.io/react/docs/jsx-spread.html) and not have to name props explicitly in the RouteHandler. — Tom, Jun 26 '15 at 08:06

score 0 · Answer 1 · answered Jun 26 '15 at 05:29

0

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.

answered Jun 26 '15 at 05:29

Hal Helms

684
3
8

Unfortunately that doesn't work either @Hal, I'd tried previously and have edited my original example above to show what happens when I try and access `this.props` from the component that handles that route. – Tom Jun 26 '15 at 08:07

Tom · Accepted Answer · 2015-06-27T15:25:04.650

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;

React component this.props is always empty

2 Answers2

Linked