<h1 dir="auto">Question about Next.js</h1>
<p dir="auto">i am curious about why this warning will occur. now i am using next.js 6.0.0 to develop my client side app. i have never use the 'url' property in my page-level component, for my page -level component is generated by an hoc -- withDvaReduxHoc. never have i used the 'url' properiy, but dispear to me, i think is unreasonable for i have never use the feature my cause warning.</p>
<p dir="auto">or other props have use the 'url'  property, when i get that props ? i have use pathname and query in my apps, but i use these props in getInitialProps life-cycle method, not the render method,  will these properites cause an warning ? and these props will be deprecated in the future ? if not, i couldn't find out what cause this warning.</p>
<p dir="auto">can u explain these to me?</p>
<p dir="auto">Currently <code class="notranslate">next/link</code> will ignore <code class="notranslate">onClick</code> props set on <code class="notranslate">&lt;Link&gt;</code> or contained <code class="notranslate">&lt;a&gt;</code> elements:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Link from 'next/link'

const customHandleClick = () =&gt; console.log('Free pizza!')

// Somewhere in render-land

&lt;Link href='/' onClick={customHandleClick}&gt;
  &lt;a&gt;No free pizza :(&lt;/a&gt;
&lt;/Link&gt;

&lt;Link href='/'&gt;
  &lt;a onClick={customHandleClick}&gt;No free pizza :/&lt;/a&gt;
&lt;/Link&gt;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">'next/link'</span>

<span class="pl-k">const</span> <span class="pl-en">customHandleClick</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'Free pizza!'</span><span class="pl-kos">)</span>

<span class="pl-c">// Somewhere in render-land</span>

<span class="pl-c1">&lt;</span><span class="pl-v">Link</span> <span class="pl-s1">href</span><span class="pl-c1">=</span><span class="pl-s">'/'</span> <span class="pl-s1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span>customHandleClick<span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>No free pizza :(<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span>Link&gt;

<span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">'/'</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">customHandleClick</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>No free pizza :/<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Clicking either of those two links will not call the <code class="notranslate">customHandleClick</code> function.</p>
<p dir="auto">This is because the <code class="notranslate">onClick</code> handler of the contained <code class="notranslate">&lt;a&gt;</code> tag is overridden by the <code class="notranslate">next/link</code> implementation <a href="https://github.com/zeit/next.js/blob/32af8294a7c2b3a39c8b04c6d751fb8a46875077/lib/link.js#L116">here</a>.</p>
<p dir="auto">If this were to be changed a good way would be checking for, and calling, the <code class="notranslate">onClick</code> prop passed to the <code class="notranslate">&lt;Link&gt;</code> element as part of its internal click handler. See <a href="https://github.com/ReactTraining/react-router/blob/73feda30b59731bc89a0a419a6be92dd93b6f0a5/packages/react-router-dom/modules/Link.js#L35-L44">react-router’s Link element</a> for inspiration.</p>
<p dir="auto">Why I would consider changing this: <code class="notranslate">onClick</code> handlers on links can be useful for various things, but mostly I didn’t expect that the <code class="notranslate">onClick</code> wasn’t being called at all. I’ve added support for this to my custom <code class="notranslate">Link</code> element, but I think <code class="notranslate">onClick</code> "should just work".</p>