Open a link in a new tab in React

This article will show you how to open a link in a new tab in React. Some ways you can do it are using target=”_blank” or the window.open() method.

How to open a link in a new tab in React

You’ve probably also clicked on a post link, redirecting you to a new tab with a new URL. So how can we do so in React? See the next part of the article.

Adding target=”_blank” method

The target attribute is used to specify the link’s destination page address. The browser will open this page when the user clicks (or tabs) on the link.

The target attribute can take one of the following values:

• _blank: With this value, the browser will open the destination page in a new window or tab.
• _self: With this value, the browser will open the destination page in the current window or tab (this is the default value).
• _parent: With this value, the browser will open the destination page instead of the parent frame (see example below).
• _top: With this value, the browser will open the destination page on the full screen (see example below).
• framename: With this value, the browser will open the destination page in the frame with the given name.

Using this attribute with the <a> tag, we can create a link that forwards us to a new tab with a defined url.

Code:

import React from "react";

const App = () => {
  return (
    <>
      <h2>Open a link in a new tab in React | LearnShareIT</h2>
      <hr />
      <a href="https://learnshareit.com/" target="_blank">
        LearnShareIT
      </a>
    </>
  );
};

export default App;

Using the <a> tag in HTML, we can set its path using the href attribute. Combined with the target attribute, you can choose which events will be assigned to that link body. So you can open a link in a new tab by clicking in React. Or you can refer to how to do it below.

Using window.open() method

We will use the window.open() method to open a new browser window with the window object.

Syntax:

window.open(url, name, specs, replace);

Parameters:

• url: is the address we want to open.
• name: is the name you want to give the window
• specs: are the parameters for the window like:
  • Browser height: height=pixel
  • Browser width: width=pixel
  • Display position of the browser window: top=pixel(top), left=pixel(left)
  • Show menu bar: yes|1 is yes, no|0 is no.
  • Show status bar: yes|1 is yes, no|0 is no.
  • Replace (optional) specifies whether the URL adds a new entry to the history list or replaces the current entry. False is the opposite of true.

However, in this way, we only need to open it in a new tab, so we will only pass it the url value to navigate the site.

Code:

import React from "react";

const App = () => {
  const handleClick=()=>{
    window.open("https://learnshareit.com/")
  }
  
  return (
    <>
      <h2>Open a link in a new tab in React | LearnShareIT</h2>
      <hr />
      <button onClick={handleClick}>
        LearnShareIT
      </button>
    </>
  );
};

export default App;

Output:

With the DOM’s onClick event catching, we can add a function to run window.open() with the url being the link we need to navigate. Just click this button to open the link in a new tab immediately. Wish you success with the ways given in the article.

Summary

In summary, you have been shown how to open a link in a new tab in React. However, I suggest you use the target method in the element to do this efficiently how you want to customize the way the link opens.

Maybe you are interested:

• Open page in new tab on button click in React
• Check if the Browser tab has Focus using React
• Handle the Browser Tab close event in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs