How to Open a link in a new tab in React

# Table of Contents

1. How to Open a link in a new tab in React
2. Open a Link in a new tab on button click in React
3. Open a Link in a new tab programmatically in React

# How to Open a link in a new tab in React

To open a link in a new tab in React, use the <a> element and set its target prop to _blank.

The _blank value specifies that the resource should be loaded into a new tab.

Copied!
export default function App() {
  return (
    <div>
      {/* 👇️ Open link in new tab */}
      <a href="https://bobbyhadz.com" target="_blank" rel="noopener noreferrer">
        bobbyhadz
      </a>
    </div>
  );
}

The code sample shows how to open a link in a new tab using an anchor tag.

When the target prop of the <a> element is set to _blank, the resource is loaded into a new tab.

Copied!
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  Google
</a>

We set the rel prop to noopener noreferrer for security purposes.

The noopener keyword of the rel attribute instructs the browser to navigate to the link without granting the visited website access to the document that opened it.

Alternatively, you can set an onClick prop on an element and call the window.open() method to load a resource in a new tab.

# Open a Link in a new tab on button click in React

To open a page in a new tab on button click:

1. Add an onClick prop to the button.
2. When the button is clicked, use the window.open() method to load the resource.
3. Set the target parameter to _blank when calling the open() method.

Copied!
const App = () => {
  const openInNewTab = url => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      <button onClick={() => openInNewTab('https://bobbyhadz.com')}>
        Visit bobbyhadz.com
      </button>
    </div>
  );
};

export default App;

The open() method on the window object loads the specified resource into a new or existing tab.

We passed the following 3 arguments to the open() method:

When the user clicks on the button, the function we passed to the onClick prop will get invoked and the specified page will get loaded in a new tab.

Copied!
<button onClick={() => openInNewTab('https://bobbyhadz.com')}>
  Visit bobbyhadz.com
</button>

This is very important, because if we pass the result of calling the function to the onClick prop, the function would get invoked immediately as the page loads and the user's browser would open the new page without waiting for the click event.

By setting target to _blank, we open the resource in a new tab.

By default, the target option is set to _self, which means that the URL opens in the current browser window when a link is clicked.

If you need to set an onClick listener on a link, click on the following article.

# Open a Link in a new tab programmatically in React

You can also use the window.open() method to open a link in a new tab programmatically.

Copied!
import {useRef, useEffect, useState} from 'react';

const App = () => {
  const [delay, setDelay] = useState(5);
  const interval = useRef();

  useEffect(() => {
    interval.current = setInterval(() => {
      setDelay(prev => prev - 1);
    }, 1000);

    return () => clearInterval(interval.current);
  }, []);

  useEffect(() => {
    if (delay === 0) {
      clearInterval(interval.current);
      window.open('https://bobbyhadz.com', '_blank', 'noopener,noreferrer');
    }
  }, [delay]);

  return <div>The Link will open in {delay}</div>;
};

export default App;

The first useEffect hook takes care of setting an interval that decrements the delay state variable by 1 each second.

The second useEffect hook checks if the delay state variable is equal to 0 each second.

Once the delay state variable is equal to 0, the window.open() method opens the link in a new tab.

If you need to create a delay function in React, check out the following article.

I've also written an article on how to remove the underline from a link.