反应：在新选项卡中打开链接

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>

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

Answer 2

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

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