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
- Javascript callback doesn't reference the correct state value
- Getting failed status while running jest test?
- Flatlist onEndReached endless loop
- How to import a folder of svg files into react as ReactComponents
- How to apply css to a specific component?
- Adding takeUntil stops triggering all the actions rxJS, redux-observable
- Pass multiple functions as a single prop using react hooks
- Update URL after opening modal, ReactJS
- how do I use "this" on an component function in react?
- Setting the initial value of a useState hook before useState is executed
- redux saga selectors, how do I access state from a saga?
- Psuedo-element ::before is not displaying
- How to handle "polymorphic" function components
- How to use useEffect to change icon of a button on cursor hover in react
- How can I remove Footer Component only in specific page?
- React-sortable-tree - How to get search window
- Toggle Font Awesome Icon when clicked in React
- Handling API error responses with axios (multiple files)
- How to validate props with propTypes having defaultProps?
- Cannot stop player if use useState React Tonejs
- How do I pass MySQL query results back to renderer from Electron "main" process?
- How do I use React 15.5 with TypeScript?
- Hiding items in React through states
- reactJS how to change between many application states
- React Data Table Child Rows missing event listeners
- Prism.js html examples in React
- Axios Uncaught TypeError: Cannot read property 'map' of undefined
- How to "reverse engineer" a simple react component to pure jquery
- Multiple Errors when using TypeScript + React
- Having trouble using setState on an empty array