在React路由器V4中將browserHistory.push（'/ login'）v2更改爲替代方案

Question

在本教程中，我使用react-router v2-3，我想使用新的React-router v4來做到這一點。所以，我試圖改變這個代碼，以使用過的反應路由器V2：

import React from 'react'; 
import { IndexLink, Link, browserHistory } from 'react-router'; 

export class Navigation extends React.Component { 
    logout(e) { 
     e.preventDefault(); 
     Meteor.logout(function() { 
      browserHistory.push('/login'); 
     }); 
    } 

    render() { 
     return (
      <nav className="navbar navbar-default"> 
       <div className="container-fluid"> 
       ...  
       <div className="collapse navbar-collapse" id="main-nav"> 
        <ul className="nav navbar-nav"> 
        <li><IndexLink to="/" activeClassName="active">Dashboard</IndexLink></li> 
        <li><a href="#" onClick={this.logout}>Logout</a></li> 
        </ul> 
       </div> 
       </div> 
      </nav> 
     ) 
    } 
} 

這一個，使用V4：

import React from 'react' 
import { NavLink } from 'react-router-dom' 

export class Navigation extends React.Component { 
    logout(e){ 
    e.preventDefault() 
    Meteor.logout(function() { 
     this.context.history.push('/login') 
    }) 
    } 
    render() { 
    return (
     <nav className='navbar navbar-default'> 
     <div className='container-fluid'> 
      ... 
      <div className="collapse navbar-collapse" id="main-nav"> 
      <ul className="nav navbar-nav"> 
       <li><NavLink to="/" activeClassName="active">Dashboard</NavLink></li> 
       <li><NavLink to="/logout" activeClassName="active" 
          onClick={this.logout.bind(this)}>Logout</NavLink></li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
    ) 
    } 
} 

但瀏覽器console.logs我一個錯誤：

Answer 1

您的應用中是否有/logout路徑？我問，因爲你可能正在處理使用logout方法傳入onClick道具。

如果你看怎麼<Link>工作 https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router-dom/modules/Link.js 你可以看到，如果有一個道具叫onClick組件將調用與事件參數的功能，如果事件沒有設置defaultPrevented爲true <Link>會嘗試去/logout路徑