title: Open link (.pdf file) in new tab after running function and without changing route
body: <p>In my react app I need to show a pdf file in a <strong>new tab</strong>, <strong>after</strong> running a function which returns the path of the file. </p>
  
  <p>What I was doing until now was using a simple div with an onClick event which triggered the above function and when I got the path of the file from the back end, I was using this.props.history.push(/'PDF') and pushing to the PDF component, which by the way is this:</p>
  
  <pre><code> render() {
      return (
          &lt;Iframe
            url={`${process.env.REACT_APP_NODE_SERVER}/${this.props.PDFFilename}`}
            position="absolute"
            width="100%"
            id="myId"
            height="100%"
            /&gt;
      );
    }
  
  </code></pre>
  
  <p>I've also used  react-new-window which works fine, it does open the pdf component in a new window <strong>but</strong> since I still use this.props.history.push, react app still changes the routing which is not desirable.</p>
  
  <p>Then, I used Link component (from react-router-dom). The problem here is that the link gets triggered before the function gets run, ending in an empty new tab. This is how I used the link component:</p>
  
  <pre><code>&lt;Link to=/PDF target="_blank"&gt;
  &lt;img className="print-dropdown" src={print} alt="print" /&gt;
  &lt;span onClick={() =&gt;
     printCons(
       this.props.username,
       this.props.password,
       "A4",
       this.props.consignmentNo,
       this.props.updatePDFFilename,
      )
     }
  &gt;
    A4
   &lt;/span&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>Any suggestion would be much appreciated.</p>