7

I am trying to make it so that when the user clicks my label, it opens up a new tab with the specified URL. It currently is not working. Any ideas what I am doing wrong or need to do in my method?

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>
GG.
  • 21,083
  • 14
  • 84
  • 130
lakeIn231
  • 1,177
  • 3
  • 14
  • 34

2 Answers2

9

in your case rerouteToGoogle renders a Link component. I believe what you're trying to achieve is opening the new tab link on click, not rendering it. In this case just change your function to

rerouteToGoogle= () => window.open('www.google.com', "_blank")
HiLuLiT
  • 433
  • 4
  • 7
8

The purpose of <Link> is to navigate from one route to another inside your React application, e.g. from /home to /about. If you want to open another site in a new tab, then you are not navigating inside the application and so you can't use <Link>.

In your case, a classic <a href="https://google.com" target="_blank"> will work.

So, to solve what you are trying to achieve, the easiest way is to add a <a> inside your <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>
GG.
  • 21,083
  • 14
  • 84
  • 130
  • Great answer, here's an [alternative](https://stackoverflow.com/questions/45046030/maintaining-href-open-in-new-tab-with-an-onclick-handler-in-react) about styling an `` tag as a table cell fyi. – Andus Feb 28 '19 at 03:21