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

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

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

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

Answer 2

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

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

因此，要解决您要实现的目标，最简单的方法是<a>在您的<Label>:

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