browserHistory.push（ '/ login'）フォームをReact Router V4内のalternativeに変更する

Question

Meteor and Reactのこのチュートリアルでは、著者はreact-router v2-3を使用します。新しいReact-router v4を使用して行います。 V4を使用して、この1に

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> 
     ) 
    } 
} 

：だから私は反応し、ルータをV2を使用し、このコードを、変更しようと

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 propに頼んでいます。

あなたは<Link>が https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router-dom/modules/Link.js を働いているか見てみると小道具があるかどうかを確認することができますがonClickコンポーネントがイベントパラメータでその関数を呼び出すと、イベントが真<Link>にdefaultPreventedを設定していない場合は/logoutパスに移動しようとしますと呼ばれます