title: <Link> onClick is causing my page to refresh
body: <p>I have a navigation bar on my site that fires off a function passed in from props when they are clicked, like so:</p>
  
  <pre><code>&lt;Filter 
    filter={this.props.params.filter}
    sub={this.props.params.sub}
    search={this.props.location.search}
    fetchData={() =&gt; this.fetchData}  /&gt;
  </code></pre>
  
  <p>Filter Component:</p>
  
  <pre><code>&lt;Link to={`/r/${this.props.sub}/new/${this.props.search}`} onClick={this.props.fetchData()}&gt;
   &lt;span className="mdl-tabs__tab is-active"&gt;New&lt;/span&gt;
  &lt;/Link&gt;
  &lt;Link to={`/r/${this.props.sub}/rising/${this.props.search}`} onClick={this.props.fetchData()}&gt;
   &lt;span className="mdl-tabs__tab is-active"&gt;Rising&lt;/span&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>Fetch Data:</p>
  
  <pre><code>      fetchData() {
          if (this.props.params.sub) {
            if (this.props.params.filter) {
                let query = `${this.props.params.sub}/${this.props.params.filter}`;
  
                this.props.fetchList(query, this.props.location.search);
            }
        }
      }
  </code></pre>
  
  <p>The problem I'm having is that whenever one of these link tags is clicked it refreshes the entire page. While this works I'd prefer the page didn't refresh. Where am I going wrong here? </p>