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处理{click}事件（to使用Link），因此浏览器未注册该事件作为指向另一页的链接，而是具有单击事件侦听器的元素。

您应该做的是利用to的{{1}}属性，它基本上是常规Link标签的href。在此处查看文档：{{3}}

这还将导致更简洁的代码。您所有的代码都可以简化为：

因此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> ); });可以完全删除。

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

1 个答案: