Comment définir target=_blank dans React

Définir la cible à _vide dans React #

Pour définir le target d’un élément à _blank En React, utilisez un élément anchor
et définissez l’élément rel prop, par exemple
<a href="https://example.com" target="_blank" rel="noopener noreferrer">. Le site
_blank signifie que la ressource est chargée dans un nouvel onglet.

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

  return (
    <div>
      {}
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
        Example.com
      </a>

      <hr />

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

Remarquez que nous devons définir le paramètre rel pour noopener noreferrer lors du réglage
target à _blank.

Le site
noopener
pour l’option rel indique au navigateur de naviguer vers la ressource cible sans accorder au nouveau contexte de navigation l’accès au document qui a fait l’objet de la demande.
cible sans accorder au nouveau contexte de navigation l’accès au document qui l’a ouvert.
l’a ouvert.

Lorsque le target prop de la a a pour valeur _blankla ressource est
chargée dans un nouvel onglet.

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

Vous pouvez également définir target à _blank lors de l’utilisation de la window.open()
fonction.

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

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

La méthode open()
de l’objet window charge la ressource spécifiée dans un onglet nouveau ou
onglet existant.

Nous avons passé les 3 paramètres suivants à l’objet open() méthode :

Lorsque l’utilisateur clique sur le bouton, la fonction que nous avons passée à la fonction onClick prop
sera invoquée et la page spécifiée sera chargée dans un nouvel onglet.

En définissant target à _blanknous ouvrons la ressource dans un nouvel onglet.