JIYIK CN >

To open a link in a new tab in React, use <a>the element and targetset its attribute to _blank, for example <a href="https://google.com" target="_blank" rel="noopener noreferrer"></a>, . _blankA value of indicates that the resource is loaded in a new tab.

export default function App() {
  const openInNewTab = url => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ 在新选项卡中打开链接 */}
      <a href="https://www.jiyik.com" target="_blank" rel="noopener noreferrer">
        迹忆客
      </a>

      <hr />

      {/* 👇️ 使用按钮在新标签中打开链接 */}
      <button onClick={() => openInNewTab('https://www.jiyik.com')}>
        迹忆客
      </button>
    </div>
  );
}

This code snippet shows how to use the anchor tag and button elements to open a link in a new tab.

When the target attribute of an a element is set to , the resource will be loaded into a new tab._blank

<a href="https://www.jiyik.com" target="_blank" rel="noopener noreferrer">
  迹忆客
</a>

For security purposes, we set the rel attribute to noopener noreferrer.

The rel keyword of the attribute noopenerinstructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.

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

export default function App() {
  const openInNewTab = url => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ 使用按钮在新标签中打开链接 */}
      <button onClick={() => openInNewTab('https://www.jiyik.com')}>
        迹忆客
      </button>
    </div>
  );
}

windowThe method of the object open()loads the specified resource into a new or existing tab.

We pass the following 3 parameters to open()the method:

• url The URL or path of the resource to load
• target The name of the browsing context into which the resource was loaded. _blankA value of 0 indicates that the resource was loaded into a new tab.
• windowFeatures Comma-delimited list of window features (for added security)

When the user clicks the button, the function we passed to the onClick attribute will be called and the specified page will be loaded in the new tab.

Notice that we pass a function to the onClick property, not the result of calling that function.

This is very important because if we pass the result of calling a function to the onClick attribute, the function will be called immediately when the page loads, and the user's browser will open the new page without waiting for the click event.

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