JIYIK CN >

To target an element in React _blank, use an anchor element and set the rel attribute, e.g. <a href="https://jiyik.com" target="_blank" rel="noopener noreferrer">a _blankvalue of to indicate that the resource is loaded in a new tab.

export default function App() {
  const openInNewTab = url => {
    // 👇️ 使用 window.open 将 target 设置为 _blank
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ 在链接上将 target 设置为 _blank */}
      <a href="https://jiyik.com" target="_blank" rel="noopener noreferrer">
        jiyik.com
      </a>

      <hr />

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

Note that when setting target to _blank, we must also 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.

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

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

Alternatively, we can set target to window.open()when using the function ._blank

export default function App() {
  const openInNewTab = url => {
    // 👇️ 使用 window.open 将目标设置为 _blank
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      <button onClick={() => openInNewTab('https://jiyik.com')}>
        Example.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 the open() 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 separated list of window features. Used in examples 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.

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

Related reading:

• Open links in new tabs with React