通过 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

听起来像是您的路由器配置有问题。您不想在同一级别声明“/”和 "user"，而是希望将 "user" 嵌入“/”内，如下所示：

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

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

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

Passing a query string via react-router

query-string

reactjs

react-router