在ListGroupItem上處理React-Router路由點擊

Question

我想鏈接ListGroupItem與反應路由器鏈接的點擊。 但是當我添加Link元素時，我失去了ListGroupItem的樣式。 如果我使用href而不是鏈接元素，那麼頁面將重新加載並且部分加載不會發生。

var NavListGroup = React.createClass({ 
    render: function() { 
     var listgroupInstance = this.props.all_users.map(function(user, index) { 
      return (
       <ListGroupItem key={index}><Link to={"/user/"+user.label}>{user.label}</Link></ListGroupItem> 
      ); 
     }); 
     return (
      <ListGroup> 
       {listgroupInstance} 
      </ListGroup> 
     ); 
    } 
}); 

任何幫助非常感謝！

Answer 1

我通過編寫一個onClick事件來處理這個問題。在onclick事件中，browserHistory.push（「your_link」）將起作用。

請確保你至少有react-router 2.0.0因爲react-router 1.0.0有一些其他的歷史庫，並且這個推送功能對我來說不起作用。

npm install --save react-router@2.0.0會做魔術

import { browserHistory } from 'react-router' 

var UserListGroup = React.createClass({ 
    alertClicked: function(userlabel) { 
     browserHistory.push("/user/"+userlabel); 
     return true; 
    }, 
    render: function() { 
     var listgroupInstance = this.props.all_users.map(function(user, index) { 
      return (
       <ListGroupItem key={index} 
        onClick={this.alertClicked.bind(this, user.label)} 
       > 
        {user.label} 
       </ListGroupItem> 
      ); 
     }.bind(this)); 
     return (
      <div> 
       My Render Template 
      </div> 
     ); 
    } 
});