score:3
above answers are correct. but simply this worked for me
target={"_blank"}
score:7
react + typescript inline util method:
const navigatetoexternalurl = (url: string, shouldopennewtab: boolean = true) =>
shouldopennewtab ? window.open(url, "_blank") : window.location.href = url;
score:27
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>
score:81
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.
score:178
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>
Source: stackoverflow.com
Related Query
- Maintaining href "open in new tab" with an onClick handler in React
- Open new tab with useNavigate hook in React
- Open link in new tab in react router programmatically
- History.push a link to a new tab with react router
- React open mailto E-Mail client onClick with body from textarea
- React history.push allow user to open in new tab
- React Router browserHistory.push open link in a new tab
- How can I open an external link in new tab in react native?
- How to open a canvas as an image in a new tab with Reactjs
- React router - pass api data to the linked component to open with a new page
- React render-pdf open in new page onclick Slow issue
- React: open page in new tab with state
- React Router - Open Link on new Tab and Redirect to Home Page
- Don't open href while an onClick is specified (in react js)
- What to set href to on a react component with an onclick
- React Link to open new tab
- How to open some child links in new tab in React
- React replacing the default component with new one onClick
- react js, when open page Other than home in new tab show 404
- Rendering a new Component with React Hooks onClick
- React onClick method od link with href not working
- How to open a PDF download into a new tab when calling a GET function from React frontend?
- React Markdown links dont open in a new tab despite using target="_blank"
- I want to open a new Tab in React application on button click?
- Opening new tab with url in react
- Anchor tag with onclick event handler not working in React
- React + React Router, handling all links to open in new tab
- webview in react native when click on any link in website which open in new tab or new window its goes to browser not override on the webview
- how do i save state when open lik in new tap with react router dom
- How to open react component in new tab without rendering the whole app component?
More Query from same tag
- difference between ClassicComponentClass and ComponentClass in reactJS
- Toast.warn render twice on refresh of page
- how to create state array in react js
- Uniting list of elements to one table row in react
- <a> tag's href showing different url on hover
- Ionic React Component only showing when clicking button
- React Styled Components conditional ternary operator
- i`m getting the 400 response error in react.js i know the backendd is ok but the client side i am not sure i am not fimiliar with react
- Uncaught Error: Invariant Violation: React.render(): Invalid component element
- React setTimout
- How to access an element of a nested array without using map in React?
- Material UI + Enzyme testing component
- React Rest Call Infinite Loop Using Hooks
- Material Ui Drawer Broken on Build
- Error 400 and 200 with useEffect React Hook
- Child div is not moving with parent div
- Initializing React number input control with blank value?
- When mapping over an array to generate React components, array order is not respected
- How to test child component method without Enzyme?
- Efficient migration strategy from OOP-based React to functional one?
- How do I edit multiple text fields with a unified state/handler?
- How to get item index appropriately using React 16.8 Hook?
- Webpack 4, babel 7, react, typescript: Unexpected token, expected ","
- Problem with React-Router / Webpack: can't get a page with a url parameter
- React displaying relative time with javascript
- How to control an input element's selection range?
- TypeError: Cannot read property 'undefined' of undefined
- react bootstrap Tabs and Nav ttems keep on stacking vertically
- How do I prevent infinite useEffect loop in this case?
- Convert error text from response api using javascript, react js