Реагирующий компонент this.props всегда пуст

Question

Я следовал за несколькими примерами в попытке получить доступ к параметру из Route в компоненте React, который его обрабатывает. Однако результат console.log на this.props изнутри render или же componentDidMount всегда {} когда я ожидал, что он будет содержать gameId от gamesView маршрут.

client.js который запускает роутер:

// 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 некоторые маршруты удалены для простоты:

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

module.exports = routes;

...а также app.js который оборачивает другие маршруты, я пробовал как с, так и без {...this.props} в RouteHandler, Если я console.log(this.props) изнутри render Функция здесь также возвращает {}:

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

module.exports = App;

Наконец то gamesView Реагируйте на компонент, который я ожидаю увидеть в объекте props. Вот this.props это также {} и следующие результаты в ошибке 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;

У кого-нибудь есть идеи?

Answer 1

После обсуждения на Github React Router (RR) выяснилось, что это из-за того, что я использовал более старую версию RR (v0.11.6).

Глядя на пример в документации к этому выпуску, он показал, что мне нужно было использовать Router.State Mixin, а затем получить ожидаемый параметр через var gameId = this.getParams().gameId;,

Без обновления RR рабочая версия моего оригинального примера для GamesView будет выглядеть так:

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

Вы не увидите эти параметры, пока не окажетесь в компоненте, определенном в вашем маршрутизаторе. App ничего о них не узнаю. Если вы положите console.log(this.props.params) в вашем gamesView Компонент, однако, вы должны увидеть их.