React-Router: Why won't <Link> component's onClick handler dispatch my action?
<p>I would like React-Router's <code>&lt;Link&gt;</code>to fire a function on click but it looks like <code>&lt;Link&gt;</code> is navigating to the next page before the function has a chance to fire. </p>

<p>My component that looks similar to this:</p>

<pre><code>&lt;Link to={`/path/to/${foo}`} onClick={() =&gt; myFunc(foo, bar)}&gt;
  &lt;div&gt;This is my Link&lt;/div&gt;
&lt;/Link&gt;
</code></pre>

<p><code>foo</code> and <code>bar</code> are props that have been passed down from parent components.</p>

<p>However, if I call <code>e.preventDefault</code>, any subsequent functions work just fine: </p>

<pre><code>&lt;Link
    to={`/path/to/${foo}`}
    onClick={(e) =&gt; e.preventDefault(); console.log('This works!')}&gt;
  &lt;div&gt;This is my Link&lt;/div&gt;
&lt;/Link&gt;
</code></pre>

<p>I imagine I could do something similar to this, then programmatically navigate to my route but there has to be a better (i.e. less hack-y) way of achieving this effect.</p>

<p>Does anyone have any suggestions, that might help me?</p>