History.push 一个带有反应路由器的新标签的链接

Posted 2023-02-21

【中文标题】History.push 一个带有反应路由器的新标签的链接

【英文标题】：History.push a link to a new tab with react router

【发布时间】：2020-10-20 01:05:58

【问题描述】：

在做一些逻辑之后，我需要打开一个指向新标签的链接。 我有一个这样的按钮：

<Button
  onClick=handleSubmit
>
  Preview
</Button>

handleSubmit() 是：

const history = useHistory();

const handleSubmit = () => 
  console.log("doing something");
  history.push("/some-link") 

如您所见，对于我的用例，使用 Link 组件是没有意义的。

那么，有没有办法将该链接推送到新标签页，只使用history.push()

【参考方案1】：

React-router 的历史仅用于应用程序的导航和一些持久性。我不明白为什么你需要用它来打开一个新标签。我认为您应该为此使用 window 对象。

const handleSubmit = () => 
  console.log("doing something");
  const win = window.open("/some-link", "_blank");
  win.focus();

【讨论】：

我不知道为什么我限制自己只使用 react-router，这肯定对我有用，谢谢。

这行得通吗？我尝试这样做，但上下文没有保留在新标签中。

@Arpit 需要注意的是，上下文数据只存在于当前选项卡中，因为它存储在它使用的内存中。因此，如果您想比当前选项卡更远地保存该信息，您应该编写代码将该数据移动到 localStorage，将其保存在您的后端或类似的东西中

history.push 可以通过这个：----- pathname: '/link', search: value, state: detail: statevalue ------ 但是 window.open 不能.我认为为什么这个问题要使用history.push

@AmirAstaneh 对其进行了测试并且工作正常。在 mac 上全新安装 firefox 和 safari