Question

我已经跟踪了couple examples，试图从处理它的React组件中的Route访问参数。但是，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：

this.props

最后我希望看到props对象的{} React组件。此处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;，以下错误导致SELECT word, SUM(amount) AS total_amount FROM Data GROUP BY word：

$row['total_amount']

有人有什么想法吗？

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总是空的

2 个答案: