History.push a link to a new tab with react router

Yassine Bridi

I need to open a link to a new tab after doing some logic.
I have a button like this:

<Button
  onClick={handleSubmit}
>
  Preview
</Button>

with the handleSubmit() being:

const history = useHistory();

const handleSubmit = () => {
  console.log("doing something");
  history.push("/some-link") 
}

As you can see, with my usecase it wouldn't make sense to use the Link component.

So, is there a way to push that link to a new tab, using only history.push()

MaCadiz

React-router's history is meant to be used just for the navigation of your application and some persistance. I can't see why you need to use it to open a new tab. I think you should use the window object for this.

const handleSubmit = () => {
  console.log("doing something");
  const win = window.open("/some-link", "_blank");
  win.focus();
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React router history push always route to 404 page

react-router Redirect vs history.push

How to push to History in React Router v4?

React-Router open Link in new tab

Redux & React Router: Combing dispatch and navigation (history.push)

React history.push allow user to open in new tab

React history.push() not rendering new component

react router is only replacing the final route on history.push

React Router - Open Link on new Tab and Redirect to Home Page

React Router BrowserRouter History Push & Google Analytics

React router `this.props.history.push` - history not defined

react-router-dom - Difference between link and history.push?

react router doesn't re-render after history push

How to mock history.push with the new React Router Hooks using Jest

React router this.props.history.push , pushing the location but not rendering the component

React router, codes after history.push run?

history.push using react-router-dom

React router history.push is not adding path from root?

React router history.push() not working from history.listen()

Onsubmit and history push is not working react router

React router not working as expected when pass state to history.push

React router push to history and preserve relative path

React router history.push falls back to 404 route

I want to open this router link in a new tab instead of same tab

How to open a link in a new tab using react?

React router dom v5 history.push does not render new page

history.push not working open in new tab in react

React Router 6 navigate to new tab with state

How to open a link via "router.push" in a new tab using Nextjs router from next/navigation