React Router的鏈接中的PreventDefault不起作用

Question

我有一個<Link>元素的陣營，我不希望在新標簽或現有標簽，打開路由器，但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.stopPropagation()和e.nativeEvent.stopImmediatePropagation() ，嘗試將其從<Link>轉換為常規<a>標記，但是無論單擊什么鏈接，總是在新選項卡中打開。

我已經通過開發工具進行了檢查，這是該鏈接附帶的唯一自定義事件處理程序。

任何想法，這可能是什么或如何追蹤？

Answer 1

如果您想要一個鏈接但不希望它路由，則應僅使用錨標記。

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

這為您提供了帶有鏈接的內置交互功能，而無需額外的樣式。 React Router Link標簽是錨標簽。 因此，您的鏈接樣式將相同。 請注意，href只是一個空的javascript塊。 這模擬了無效鏈接（除非您具有單擊偵聽器）。

Answer 2

好的，事實證明，其他人已經添加了將事件偵聽器添加到另一個組件中所有href的功能，這就是無論我做什么都在新選項卡中打開它的原因。

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，而不僅僅是編寫它的那個。

它在開發工具檢查器的click事件處理程序中被偵聽，我只是錯誤地認為它引用了其他內容。