Open a link in a new tab in React

DanielJanuary 23, 2023May 3, 2023

Let's explore 2 ways of how to open a link in a new tab in React.

Opening a link in a new tab in React using the target attribute

The first obvious step is to use the target="_blank" attribute.

const newTabLink = ({url, text})=> {
    return(
        <a href={url} rel="noopener" target="_blank">
            {text}
        </a>
    )
}

Keep in mind to use rel="noopener" to avoid the security vulnerability that target=”_blank” may expose.

Opening a new tab at onClick() in React

The second option is to open a url in a new tab when the user clicks on a button or other React component.

We can do this using the window.open() method.

<button onClick={
        () => window.open('https://www.js-craft.io/', '_blank', 'noopener')
    }>
    Go to JS Craft
</button>

Keep in mind that also in this case we will need to add the noopener parameter to avoid any phishing vulnerabilities.

Speaking of this we have seen in a former article also how to open a NextJs link in a new tab.