title: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>
body: <p>I'm trying to use <code>react-router</code> with <code>reactstrap</code> with <code>create-react-app</code>.</p>
  <p>In the routing page, I needed to use state for the <code>reactstrap</code>, so I converted the router from a variable to a class, but I get this warning:</p>
  <blockquote>
  <pre><code>Warning: validateDOMNesting(...): &lt;a&gt; cannot appear as a descendant of &lt;a&gt;.
  </code></pre>
  </blockquote>
  <p>I don't know what to do. I needed to style the router navigation using <code>reactstrap</code>, so I did this:</p>
  <pre><code>&lt;NavLink
      componentClass={Link}
      href=&quot;/contact&quot;
      to=&quot;/contact&quot;
      active={location.pathname === '/contact'}
  &gt;
      anywords
  &lt;/NavLink&gt;
  </code></pre>
  <pre><code>&lt;Navbar dark id=&quot;RouterNavbar&quot; expand=&quot;md&quot;&gt;
  
      &lt;NavbarBrand id=&quot;NavBrand&quot;href=&quot;#x&quot;&gt;
          &lt;ul&gt;
              {/* a bunch of &lt;li&gt;&lt;/li&gt; */}
          &lt;/ul&gt;
      &lt;/NavbarBrand&gt;
  
      &lt;NavbarToggler id=&quot;NavBarToggler&quot; onClick={this.toggle1.bind(this)} /&gt;
  
      &lt;Collapse isOpen={this.state.isOpen1} navbar&gt;
  
      &lt;Nav className=&quot;ml-auto&quot; navbar&gt;
  
      &lt;NavItem&gt;
          &lt;NavLink href=&quot;#x&quot;&gt;&lt;Link id=&quot;RouterNavLink&quot; style={None} to=&quot;/contact&quot;&gt;anywords&lt;/Link&gt;&lt;/NavLink&gt;
      &lt;/NavItem&gt;
  
  {/* just more of the above */}
  </code></pre>
  <p>Other than a couple of <code>&lt;li&gt;</code> coming close to each other at random times, hot reloading not working sometimes, and the warning message I get in the console, nothing bad happens, but when I read about this issue, I found out that I shouldn't do this.</p>