[Solved]-Maintaining href "open in new tab" with an onClick handler in React-Reactjs

above answers are correct. but simply this worked for me

target={"_blank"}

react + typescript inline util method:

const navigatetoexternalurl = (url: string, shouldopennewtab: boolean = true) =>
shouldopennewtab ? window.open(url, "_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 = window.open(url, '_blank', 'noopener,noreferrer')
  if (newwindow) newwindow.opener = null
}

then add to your onclick

onclick={() => openinnewtab('https://stackoverflow.com')}

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

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

onclick={onclickurl('https://stackoverflow.com')}

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

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

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

the third window.open 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={()=> window.open("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>