通過反應路由器傳遞查詢字符串

你好，我試圖通過查詢字符串通過反應路由器傳遞信息，但我無法訪問它。我相信我正確地遵循了這些步驟，但還是一無所獲通過反應路由器傳遞查詢字符串

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

其實我剛上班。謝謝！ –

通過反應路由器傳遞查詢字符串

回答

相關問題