React：在新标签页中打开链接

Question

我试图让用户点击我的标签时，在新标签页打开指定的 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>

- lakeIn231

---

如果您不想使用<a>，则可以使用onClick={ () => window.open('www.google.com', '_blank');}。 - hangvirus

嗨@Jay266，如果答案有帮助解决了您的问题，您能否考虑接受它呢？谢谢。 - GG.

Answer 1

在你的情况下，rerouteToGoogle 渲染了一个 Link 组件。我相信你想要达到的目标是在单击时打开新标签页链接，而不是渲染它。在这种情况下，只需将你的函数更改为

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

- HiLuLiT

Answer 2

<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>

- GG.

---

很棒的答案，这是一个关于将<a/>标签样式化为表格单元格的替代方案，供您参考。 - Andus