React 组件 this.props 始终为空

Question

我已经按照 couple of examples 尝试从处理它的 React 组件中的路由访问参数。但是，render 或 componentDidMount 中 this.props 上的 console.log 的结果始终是 {}，而我希望它包含 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 包裹了其他路线，我已经尝试过在 RouteHandler 中使用和不使用 {...this.props}。如果我从 render 函数内部 console.log(this.props) 这里也是 returns {}:

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

module.exports = App;

最后 gamesView 我希望看到 props 对象的 React 组件。这里 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

您不会看到这些参数直到您位于路由器中定义的组件处。 App 对他们一无所知。但是，如果您将 console.log(this.props.params) 放在 gamesView 组件中，您应该会看到它们。

Answer 2

在 discussing on the React Router (RR) Github 之后发现这是因为我使用了旧版本的 RR (v0.11.6)。

查看 example in the docs for that release 它表明我需要使用 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;

React 组件 this.props 始终为空

React component this.props is always empty

javascript

reactjs

reactjs-flux

react-router

react-router-component