gatsby-link does not work with target="_blank"

Created on 3 May 2019  路  5Comments  路  Source: gatsbyjs/gatsby

Description

<Link to={slug} target="_blank">hello</Link> does not open a new tab in the browser.

Steps to reproduce

Create new gatsby project, add:
<Link to='/some-path' target="_blank">wut</Link>
And click on it

Expected result

New tab is opened

Actual result

Link opens in existing tab

Environment


  System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.11.0 - /usr/local/bin/node
    Yarn: 1.13.0 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 66.0.1
    Safari: 12.1
  npmPackages:
    gatsby: ^2.1.0 => 2.1.32 
    gatsby-image: ^2.0.29 => 2.0.33 
    gatsby-plugin-favicon: ^3.1.5 => 3.1.5 
    gatsby-plugin-google-analytics: ^2.0.14 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.10 => 2.0.12 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.14 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.9 
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5 
    gatsby-plugin-sass: ^2.0.10 => 2.0.11 
    gatsby-plugin-sharp: ^2.0.20 => 2.0.28 
    gatsby-plugin-styled-components: ^3.0.5 => 3.0.7 
    gatsby-remark-copy-linked-files: ^2.0.9 => 2.0.10 
    gatsby-remark-images: ^3.0.3 => 3.0.9 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.2 
    gatsby-source-filesystem: ^2.0.20 => 2.0.25 
    gatsby-transformer-remark: ^2.2.5 => 2.3.3 
    gatsby-transformer-sharp: ^2.1.13 => 2.1.17 


question or discussion

Most helpful comment

Gatsby Link is used for internal routing you can use that for external routing. Opening a new window is equal to external routing so you have to use anchor tag for that.

<a href="/some-path" target="_blank" >some text</a>

All 5 comments

Gatsby uses @reach/router and the Link component has onClick handler that overrides any default functionality of the anchor element.
https://github.com/reach/router/blob/master/src/index.js#L391

<Link> is for internal routing. For external routing use <a>

Gatsby Link is used for internal routing you can use that for external routing. Opening a new window is equal to external routing so you have to use anchor tag for that.

<a href="/some-path" target="_blank" >some text</a>

^ What @nnnkit and @imkrunal said

Marking this as answered and closing. Thank you everyone!

But when the path is an "internal" link to an other datsbyjs page I use the path prefix?

Then the a tag has not included the prefix?

Then I assume there's no way to open an internal link within a new window/tab while using Link, so that we lose the advantages of Link for this use cases

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brandonmp picture brandonmp  路  3Comments

totsteps picture totsteps  路  3Comments

timbrandin picture timbrandin  路  3Comments

jimfilippou picture jimfilippou  路  3Comments

signalwerk picture signalwerk  路  3Comments