反应：在新标签页中打开链接答案

【问题标题】：React: open link in a new tab反应：在新标签页中打开链接
【发布时间】：2020-07-08 19:56:15
【问题描述】：

我正在尝试这样做，以便当用户单击我的标签时，它会打开一个带有指定 URL 的新选项卡。它目前不工作。有什么想法我做错了什么或需要在我的方法中做什么？

rerouteToGoogle= () => {
    return <Link to="google.com" />

}

<MediaQuery query="(min-width: 550px)">
  <div style={styles.alignText}>
  <Label color='green' basic onClick={this.rerouteToGoogle} >CSV</Label>
  </div>
</MediaQuery>

【问题讨论】：

如果你不想使用那么 onClick={ () => window.open('www.google.com', '_blank');}
嗨@Jay266，如果它有助于解决您的问题，您可以考虑接受答案吗？谢谢。

标签： javascript reactjs react-router

【解决方案1】：

<Link> 的目的是在 React 应用程序中从一个路由导航到另一个路由，例如从/home 到/about。如果您想在新选项卡中打开另一个站点，那么您不是在应用程序内部导航，因此您不能使用<Link>。

在您的情况下，经典的<a href="https://google.com" target="_blank"> 将起作用。

因此，要解决您想要实现的目标，最简单的方法是在您的<Label> 中添加一个<a>：

<MediaQuery query="(min-width: 550px)">
  <div style={styles.alignText}>
  <Label color='green' basic>
    <a href="https://google.com" target="_blank">CSV</a>
  </Label>
  </div>
</MediaQuery>

【讨论】：

很好的答案，这是一个alternative，关于将<a/> 标记设置为表格单元格供参考。

【解决方案2】：

在您的情况下，rerouteToGoogle 呈现一个 Link 组件。我相信你想要实现的是在点击时打开新标签链接，而不是渲染它。在这种情况下，只需将您的功能更改为

rerouteToGoogle= () => window.open('www.google.com', "_blank")

【讨论】：