에서 preventDefault 내가하지</em> 새 탭 또는 기존의 탭에서 열려 할 <em>라우터 반응에서 <code><Link></code> 요소가

Question

작동하지 라우터 반응하지만, e.preventDefault()을 작동하지 않습니다 :

constructor(props) { 
    super(props); 
    this.loadLink = this.loadLink.bind(this); 
} 

loadLink(e) { 
    e.preventDefault(); 
    const id = null || e.target.id; 
    this.props.onLink(id); 
} 

render() { 
    return (
     <Link id="my-id" ref="my-id" onClick={this.loadLink} to="/some-url">Some link</Link> 
    ); 
} 

과 e.nativeEvent.stopImmediatePropagation()을 시도한 결과 <Link>에서 <a> 태그로 변환하려고했지만 링크를 클릭해도 항상 새 탭에서 열립니다.

dev 도구를 통해 확인했으며 해당 링크에 연결된 유일한 맞춤 이벤트 처리기입니다.

어떤 아이디어일까요? 어떻게 추적 할 수 있습니까?

Answer 1

좋아요, 다른 사람이 이벤트 리스너를 추가하는 기능을 추가 한 것으로 나타났습니다. 다른 구성 요소에있는 의 모든 하위 시스템에 이벤트 리스너를 추가 했으므로 내가 수행 한 작업에 상관없이 새 탭에서 열었습니다.

componentDidMount() { 
    const anchors = document.getElementsByTagName("a"); 
    for (let i = 0, length = anchors.length; i < length; i++) { 
     const anchor = anchors[i]; 
     anchor.addEventListener('click', function(e) { 
      e.preventDefault(); 
      window.open(this.getAttribute('href'), '_blank'); 
     }, true); 
    } 
} 

이 문제가 해결되었습니다.

하나의 교훈은, 위의 함수는 모든 구성 요소의 모든하는 HREF를 지배 구성 요소 수준의 기능의 범위를 제한하는 것입니다뿐만 아니라 하나 그것은 작성되었습니다.

그것은의 클릭 이벤트 핸들러에서 대기하고 있던 dev tools inspector, 나는 실수로 다른 것을 언급했다고 생각했습니다.

Answer 2

링크를 원하지만 경로를 지정하지 않으려면 앵커 태그 만 사용해야합니다.

<a onClick={this.loadLink} href="javascript:;">Some link</a> 

이렇게하면 특별한 스타일링 없이도 링크와 상호 작용할 수 있습니다. 반응 라우터 Link 태그는 앵커 태그입니다. 그래서 귀하의 링크 스타일은 동일합니다. href가 단지 빈 javascript 블록이라는 것을 주목하십시오. 이것은 죽은 링크를 시뮬레이트합니다 (단, 클릭 리스너는 제외).