React Router browserHistory.push 在新标签页中打开链接

Question

可以使用 <link> 作为

<Link to="route" target="_blank">

在新标签页中打开链接。但是是否可以使用 browserHistory.push 在新选项卡中打开链接？

原文由 Kousha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React-router 是建立在浏览器 History API 之上的。 browserHistory.push 调用 pushState() 方法。

从链接文档的第一行：

pushState( ) 采用三个参数：状态对象、标题（当前被忽略）和（可选）统一资源定位器 (URL)。

所以，你的问题的答案是“否”。

原文由 U r s u s 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在看到 Cooper 的评论之前，我已经抱怨了一个小时

browserHistory 是每个选项卡。

这非常简单但准确，让我想出了这个解决方案：

我把它放在我的 App.js 中（更新：我添加了窗口 blur 事件，因为当 cmd+tab 或 cmd+` 到另一个窗口时我遇到了丢失的 keyUp 事件。）

   const [metaKeyPressed, setMetaKeyPressed] = useState(false);
  const handleMetaKeyDown = e => {
    if (e.metaKey) {
      setMetaKeyPressed(true);
    }
  };

  const handleMetaKeyUp = e => {
    if (e.metaKey) {
      setMetaKeyPressed(false);
    }
  };

  useEffect(() => {
    document.addEventListener('keydown', handleMetaKeyDown);
    document.addEventListener('keyup', handleMetaKeyUp);
    window.addEventListener('blur', handleMetaKeyUp);
    return () => {
      document.removeEventListener('keydown', handleMetaKeyDown);
      document.removeEventListener('keyup', handleMetaKeyUp);
      window.removeEventListener('blur', handleMetaKeyUp);
    };
  });

然后我有 metaKeyPressed 我用它来选择是 history.push 还是 window.open （为便于阅读而简化）：

 const handleRoute = path => {
    if (metaKeyPressed) {
      window.open(path);
    } else {
      history.push(path);
    }
  };

另外，考虑为这个问题添加一个修复 https://www.jitbit.com/alexblog/256-targetblank—the-most-underestimated-vulnerability-ever/ 我没有添加这个因为浏览器想要用户在我这样做时明确允许弹出窗口。

原文由 David Avikasis 发布，翻译遵循 CC BY-SA 4.0 许可协议