how to add target=_blank on react

user_12337571 0
Viewed 22619

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>

gatsby react-native reactjs hyperlink
4 Answers
user_106944250

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

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

user_92398240
Related