反应路由器链接右键单击不起作用

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( toforLink )，因此浏览器不会将其注册为指向另一个页面的链接，而是将其注册为具有点击事件侦听器的元素。

您应该做的是利用 的to属性Link，这基本上href是常规a标签的属性。请参阅此处的文档：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可以完全删除。