Materialize a href buttons inside a React Router Link Component
<p>I'm trying to use materialize.css to stylize a signup button. Materialize creates buttons using the anchor tag e.g</p>

<pre class="lang-html prettyprint-override"><code>&lt;a class="waves-effect waves-light btn"&gt;Button&lt;/a&gt;
</code></pre>

<p>which renders this:</p>

<p><a href="https://i.stack.imgur.com/E3NMV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E3NMV.png" alt="enter image description here"></a></p>

<p>Currently I'm using this in a Meteor project using react-router and trying to wrap a react-router &lt; Link > component around it</p>

<pre class="lang-html prettyprint-override"><code>&lt;Link to="signup"&gt;&lt;a className="waves-effect waves-light btn blue-grey darken-1"&gt;&lt;i className="material-icons left"&gt;cloud&lt;/i&gt;Register Here!&lt;/a&gt;&lt;/Link&gt;
</code></pre>

<p>With this implementation I'm getting this dom warning:</p>

<p>"Warning: validateDOMNesting(...):  cannot appear as a descendant of . See App > Link > a > ... > a."</p>

<p><a href="https://i.stack.imgur.com/oaaGt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oaaGt.png" alt="enter image description here"></a></p>

<p>How would I go about getting around this?</p>