browserHistory.push ('/ login') 폼을 리얼토풋 라우터 V4의 대체 노드로 변경하십시오.

Question

이 튜토리얼의 Meteor and React에서 저자는 react-router v2-3을 사용합니다. 새로운 React-router v4를 사용하여이 작업을 수행하고 싶습니다. 이것에

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 : 그래서,이 코드를 변경 사용되는 반응 - 라우터 V2 것을하려고

Answer 1

/logout 경로가 앱에 있습니까? 당신이 아마도 logout 메서드를 사용하여 onClick 소품으로 처리하기 때문에 나는 묻고 있어요. <Link>이 소품 이벤트가 /logout 경로로 이동하려고합니다 사실 <Link>에 defaultPrevented를 설정하지 않은 경우 onClick 구성 요소가 이벤트 매개 변수를 사용하여 해당 함수를 호출합니다라는이 있다면 당신이 볼 수 https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router-dom/modules/Link.js 작업 방법

당신이 보는 경우에