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>

score 17 · Answer 1 · answered Apr 07 '21 at 03:06

17

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

answered Apr 07 '21 at 03:06

Hasan Tezcan

1,116
1
11
23

score 9 · Accepted Answer · answered Sep 22 '20 at 08:00

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>
    )
  } 
}

Muh-Osman · Answer 3 · 2023-07-28T22:38:04.750

Security

When you use target="_blank" with Links, it is recommended to always set rel="noopener" or rel="noreferrer" when linking to third party content.

rel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process. Without this, the target page can potentially redirect your page to a malicious URL.
rel="noreferrer" has the same effect, but also prevents the Referer header from being sent to the new page. ⚠️ Removing the referrer header will affect analytics.
```
<a href="www.google.com" target="_blank" rel="noreferrer"> Search </a>
```

score 0 · Answer 4 · answered Sep 22 '20 at 07:50

0

<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>

answered Sep 22 '20 at 07:50

Masudul Hasan Shawon

502
3
14

i cant use that, because is not just a link on a static text, i have diferent posts with diferent links – Javi Magaldi Sep 22 '20 at 07:52
Fine, Then save your dynamic url on a state and use them in the route. for example - {event.preventDefault(); window.open(this.makeHref({This.state.url}));}} /> – Masudul Hasan Shawon Sep 22 '20 at 07:56

score 0 · Answer 5 · answered Sep 22 '20 at 07:53

0

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

answered Sep 22 '20 at 07:53

Arfizur Rahman

384
4
13

does it work on every link? and where should i place it? – Javi Magaldi Sep 22 '20 at 08:03
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. – Arfizur Rahman Sep 22 '20 at 08:08

Chris Groh · Answer 6 · 2023-02-02T20:52:53.493

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';
    }
}

score -2 · Answer 7 · edited Jan 19 '23 at 07:01

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

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.

how to add target=_blank on react

7 Answers7