javascript - React Router 链接右键单击不起作用

Question

我遇到一个问题，即“右键单击”使用 React Router Link 标签创建的链接。 我希望能够右键单击这些链接并选择“在新选项卡中打开链接”选项。 谁能帮我解决这个问题？

这是我的代码:

redirectUrl = (e) => {
    let url = e.currentTarget.getAttribute("dataattrurl");
    browserHistory.push({
      pathname    : url,
      query       : '',
      state       : {}
    });
  }
  
  const listItems = readingHistory.map((item, index) => {
      return (
        <li key={index} role="listitem">
          <Link className="linkPointer" onClick={this.redirectUrl} dataattrurl={`/document/${item.resId}`} onContextMenu={this.contextMenu}>
            {item.title}
          </Link>
        </li>
      );
    });

Answer 1

问题是您正在使用 onClick 而不是 href (to for Link)，因此浏览器不会将其注册为另一个页面的链接，而是将其注册为具有点击事件监听器的元素。

你应该做的是利用 Link 的 to 属性，它基本上是常规 a 的 href 标签。请在此处查看文档:https://reacttraining.com/react-router/web/api/Link

这也会产生更简洁的代码。您的所有代码都可以简化为:

const listItems = readingHistory.map((item, index) => {
    return (
        <li key={ index } role="listitem">
            <Link className="linkPointer" to={ `/document/${item.resId}` } onContextMenu={ this.contextMenu }>
                { item.title }
            </Link>
        </li>
    );
});

因此 redirectUrl 可以完全删除。