title: React-router: How to manually invoke Link?
body: <p>I'm new to ReactJS and to React-Router. I have a component that receives through props a <code>&lt;Link/&gt;</code> object from <strong>react-router</strong>. Whenever the user clicks on a 'next' button inside this component I want to invoke <code>&lt;Link/&gt;</code> object manually.</p>
  
  <p>Right now, I'm using <em>refs</em> to access the <strong>backing instance</strong> and manually clicking on the 'a' tag that <code>&lt;Link/&gt;</code> generates. </p>
  
  <p><strong>Question:</strong> Is there a way to manually invoke the Link (e.g. <code>this.props.next.go</code>)?</p>
  
  <p>This is the current code I have:</p>
  
  <pre><code>//in MasterPage.js
  var sampleLink = &lt;Link to="/sample"&gt;Go To Sample&lt;/Link&gt;
  &lt;Document next={sampleLink} /&gt;
  
  //in Document.js
  ...
  var Document = React.createClass({
     _onClickNext: function() {
        var next = this.refs.next.getDOMNode();
        next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
     },
     render: function() {
        return (
           ...
           &lt;div ref="next"&gt;{this.props.next} &lt;img src="rightArrow.png" onClick={this._onClickNext}/&gt;&lt;/div&gt;
           ...
        );
     }
  });
  ...
  </code></pre>
  
  <p>This is the code I would like to have:</p>
  
  <pre><code>//in MasterPage.js
  var sampleLink = &lt;Link to="/sample"&gt;Go To Sample&lt;/Link&gt;
  &lt;Document next={sampleLink} /&gt;
  
  //in Document.js
  ...
  var Document = React.createClass({
     render: function() {
        return (
           ...
           &lt;div onClick={this.props.next.go}&gt;{this.props.next.label} &lt;img src="rightArrow.png" /&gt; &lt;/div&gt;
           ...
        );
     }
  });
  ...
  </code></pre>