通过反应路由器传递查询字符串

你好，我试图通过查询字符串通过反应路由器传递信息，但我无法访问它。我相信我正确地遵循了这些步骤，但还是一无所获通过反应路由器传递查询字符串

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;

我不断收到此错误

但正如你所看到的查询字符串存在

来源

2016-08-12 Ayaz Uddin

你可以显示你的路由器配置吗？ 'UserShowView'是'Route'元素的直接子元素吗？ – azium

好的还有两个问题：a）什么版本的react-router和b）你用'browserHistory'而不是'hashHistory'试过了吗？ – azium

我刚刚尝试切换。一样。 –

听起来像是你的路由器配置的问题。相反，在同级别声明“/”和“用户”的，你想要做嵌入“用户”内部“/”象下面这样：

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

试试这个，让我知道是否有帮助。

来源

2016-08-12 22:37:14 KumarM

嘿kumar。所以我尝试使用您提供的代码，现在我得到查询字符串，但UserShowView组件不再呈现。 –

@AyazUddin一些真实的代码丢失了，所以没有它就很难提供帮助。 UserShowView，UserShowContainer，UserContainer是所有使用的术语，但不能通过代码看到它们是如何相关的。但考虑到你的原始问题已经回答了查询参数，你可能需要考虑选择这个答案作为答案，并用你的其他问题（和相关代码）开始一个新线程。 – KumarM

其实我刚上班。谢谢！ –

通过反应路由器传递查询字符串

回答

相关问题