通过react-router传递查询字符串

Question

您好我试图通过react-router通过查询字符串传递信息，但我无法访问它。我相信我正确地遵循了步骤，但仍然没有。

var UserContainer = React.createClass({
contextTypes: {
    router: React.PropTypes.object.isRequired
},
getInitialState: function() {
    return{
        id: this.props.data.id,
        username: this.props.data.username,
        html_url: this.props.data.html_url,
        avatar_url: this.props.data.avatar_url
    }
},
handleUserClick: function(event) {
    event.preventDefault();

    var id = this.state.id;
    var username = this.state.username;
    var html_url = this.state.html_url;
    var avatar_url = this.state.avatar_url;

    this.context.router.push({
        pathname: '/user',
        query: {
            id: id,
            username: username,
            html_url: html_url,
            avatar_url: avatar_url
        }
    });
},

//ROUTED TO THIS COMPONENT 

var React = require('react');

var UserShowView = React.createClass({
contextTypes: {
    router: React.PropTypes.object.isRequired
},
componentDidMount: function() {
    console.log(this.props.location.query)
},
render: function() {
    return(
        <div>
            Hello
        </div>
    )
}
});

// REACT_ROUTER

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;

var UsersIndexContainer = require('../containers/UsersIndexContainer');
var UserShowContainer = require('../containers/UserShowContainer');

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={UsersIndexContainer} />
    <Route path='user' component={UserShowContainer} />
  </Router>
);

module.exports = routes;

我一直收到此错误

但是你可以看到查询字符串存在

Answer 1

听起来像您的路由器配置问题。而不是声明＆＃34; /＆＃34;和＆＃34;用户＆＃34;在同一级别，你想要嵌入＆＃34;用户＆＃34;在＆＃34; /＆＃34;如下所示：

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={UsersIndexContainer}>
        <Route path='user' component={UserShowContainer} />
    </Route>
  </Router>
);

尝试一下，如果有帮助，请告诉我。