above answers are correct. but simply this worked for me



react + typescript inline util method:

const navigatetoexternalurl = (url: string, shouldopennewtab: boolean = true) =>
shouldopennewtab ?, "_blank") : window.location.href = url;


the answer from @gunn is correct, target="_blank makes the link open in a new tab.

but this can be a security risk for you page; you can read about it here. there is a simple solution for that: adding rel="noopener noreferrer".

<a style={{display: "table-cell"}} href = "somelink" target = "_blank" 
rel = "noopener noreferrer">text</a>


most secure solution, js only

as mentioned by alko989, there is a major security flaw with _blank (details here).

to avoid it from pure js code:

const openinnewtab = (url) => {
  const newwindow =, '_blank', 'noopener,noreferrer')
  if (newwindow) newwindow.opener = null

then add to your onclick

onclick={() => openinnewtab('')}

to be even terser in react, you can directly return a function

const onclickurl = (url) => {
  return () => openinnewtab(url)


for typescript + react, here is what these would look like:

export const openinnewtab = (url: string): void => {
  const newwindow =, '_blank', 'noopener,noreferrer')
  if (newwindow) newwindow.opener = null

export const onclickurl = (url: string): (() => void) => () => openinnewtab(url)

the third param can also take these optional values, based on your needs.


you have two options here, you can make it open in a new window/tab with js:

<td onclick={()=>"somelink", "_blank")}>text</td>

but a better option is to use a regular link but style it as a table cell:

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

Related Query

More Query from same tag