Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

open window using react-router v4's this.props.history.push?

I know we can use a Link tag and pass in target="_blank" like

<Link to="/" target="_blank">Hello World</Link>

but I am having trouble finding out I can do that with this.props.history.push... I am using that to pass in a pathname and search string...

    let searchString = queryString.stringify({
      rangeEnd: data.programEnd,
    });

    this.props.history({
      pathname: `/machines/${machineId}`,
      search: searchString,
      target: "_blank // need something like this, not seeing it in docs
    });
like image 412
A.com Avatar asked Jan 17 '19 14:01

A.com


People also ask

How do I push to history on my react router?

Using history.push() is another approach where we make use of the history props React Router provides while rendering a component. In other words, this works when the component is being rendered by React Router, bypassing the component as a Component prop to a Route.

How do you use this props history PUSH IN react JS?

The history. push() function belongs to react-router-dom and used to move from the current page to another one. It takes the first argument as a destination path and a second argument as the state. Note: You can only use this.

How do I pass Props to react to my router?

To recap, if you need to pass data from Link through to the new component that's being rendered, pass Link s a state prop with the data you want to pass through. Then, to access the Link s state property from the component that's being rendered, use the useLocation Hook to get access to location.

Does react router use history API?

React Router uses the history package, which builds on the browser history API to provide an interface to which we can use easily in React apps. location - (object) The current location. May have the following properties: pathname - (string) The path of the URL.


1 Answers

History push changes address in the same window.

One option could be using window.open()

const url = `#/machines/${machineId}?${searchString}`;
window.open(url);
like image 161
Rishabh Avatar answered Oct 12 '22 18:10

Rishabh