CODEWITHSUNDEEP
reactjsreact-router
shiju
shiju

Reputation: 11

Open page in new window when clicking a link in ReactJS

In my React application, I need to open a page in new window when clicking a link in the Bootstrap table. Please help me with the example.

Earlier, I have set the table cell in a variable and assigned it to dataformat in the table header. How can I change this code to open in new window?

Update: After making the code changes as suggested below, the page is opening in a new tab but the testid is not passing to the other page (which is fetched using this.props.testid).

column1 = (cell, row) => {
  let link = `${cell}`
  return (
    <Link to={{                
      pathname: '/test',
      state: {
        testId: row.testid
      }
    }} target="_blank" rel='noopener noreferrer'>
      {cell}
    </Link>
}

Upvotes: 1

Views: 2534

Answers (3)

Maulik Sakhida
Maulik Sakhida

Reputation: 501

Use a regular link but style it as a table cell:

<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a>

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9769

You can define anchor tage like this in react to open in new window

Define rel="noopener noreferrer" to avoid warning in react.

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

Upvotes: 1

carrany
carrany

Reputation: 156

Maybe try this: 

 <td onClick={()=> window.open("LinkToOpen", "_blank")}>Link</td>

Upvotes: 1

Related Questions