Open new tab with useNavigate hook in React

Question

I am trying to navigate with the useNavigate hook and everything is good, but I want it to open the URL in a new tab, and not the current one. Is that possible?

My code:

import { useNavigate } from "react-router-dom";
...
...
const navigate = useNavigate();
...
...
<Button onClick={()=>{navigate('/someURL')}}>Open URL</Button>

Answer 1

you can use window.open() method instead of using navigate() to open the URL in the new tab. Pass '_blank' as a second argument in the function for opening it in new tab.

Importantly! If the rel="noopener noreferrer" attribute is added to the link, the referrer information will not be leaked. The end goal is not to miss the HTTP referrer title when a person clicks on a hyperlink. If there is no information in the title, it will not be tracked by analytical tools.

Example:

<Button onClick={()=>window.open('/someURL','_blank', 'rel=noopener noreferrer')}>Open URL</Button>