how to add target=_blank on react

Question

I need to make all the links from a text open a new tab, and the text come from dangerouslySetInnerHTML={{__html: content,}}. the code is in a new class that extends component in react the block of code where i pick the text id in < section>

Piper

Answer 1

Here is my solution using replace

var content = `<a href="https://stackoverflow.com">Stack Overflow</a><a href="https://google.com">Google</a>`;

class App extends React.Component {

  render(){
    return (
      <div 
          dangerouslySetInnerHTML={{
              __html: content.replace(/href/g, "target='_blank' href")
          }}>
      </div>
    )
  } 
}

Peddle

Answer 2

Just add rel="noopener noreferrer" will fix your problem.

https://caniuse.com/?search=noopener%20

<a href="https://hasantezcan.dev" target="_blank" rel="noopener noreferrer">Go to website</a>

source

Shied

Answer 3

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("Your_route"));}} />

I Mean

<Link ... target="_blank">

OR

<a target='_blank' href={'Your_url'})}>Your Text</a>

Pretence

i cant use that, because is not just a link on a static text, i have diferent posts with diferent links – Piper

Fine, Then save your dynamic url on a state and use them in the route. for example - <Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref({This.state.url}));}} /> – Pretence

Answer 4

You can use:

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />

Please refer to React-Router open Link in new tab

Estranged

does it work on every link? and where should i place it? – Piper

Yes, it should work on every link. Please provide the necessary code snippets so that we can help you with where to place this exactly. – Estranged

Answer 5

Rather than changing them up front, you can update them on the fly with a click handler.

<div onClick={sendLinksToNewWindow}>

function sendLinksToNewWindow(event) {
    if (!(event.target instanceof HTMLElement))
        return;
    // Use .closest to handle scenario where target isn't the anchor itself. 
    // Ex: `<a href='https://example.com'><span>click here</span></a>`
    const anchor = event.target.closest('a');
    if (anchor !== null) {
        anchor.target = '_blank';
        anchor.rel = 'noopener';
    }
}

Chuckchuckfull

Answer 6

In React, you can add the target="_blank" attribute to an anchor () element by using the dangerouslySetInnerHTML attribute, like so:

<a href={url} dangerouslySetInnerHTML={{__html: linkText}} target="_blank" rel="noopener noreferrer" />

or by using JSX and Link from react-router-dom package

import { Link } from 'react-router-dom'

{linkText}

It's important to also include the rel="noopener noreferrer" attribute to prevent a potential security vulnerability.

Alternatively, you can use the onClick event to open the link in a new tab, like so:

<a href={url} onClick={(e) => { e.preventDefault(); window.open(url, '_blank'); }}>{linkText}

This will open the link in a new tab when clicked.

Noni