Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

Question

I'm trying to use react-router with reactstrap in a create-reat-app .In the routing page i needed to use state for the reactstrap so i converted the router from a variable to a class.I get this warning : Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. i don't know what to do ?, i needed to style the router navigation using reactstrap so i did what you see below .

This didn't work for so many reasons :

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>

<Navbar  dark id="RouterNavbar" expand="md">
          <NavbarBrand id="NavBrand"href="#x"><ul>(a bunch of li not relevant)</ul></NavbarBrand>
<NavbarToggler id="NavBarToggler"  onClick={this.toggle1.bind(this)}  />
          <Collapse  isOpen={this.state.isOpen1}  navbar>
            <Nav   className="ml-auto"  navbar>
            <NavItem>
                <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
              </NavItem>
(then just more of the above)

other than a couple of li coming close to each other at random times and me having to refresh the page sometimes instead of the normal behaviour (auto refresh ) and the warning message i get in the console ,nothin bad happens but when i read about this issue i found out that i shouldn't do it.

Answer 1

This is the code which causing the error,

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

Which is converted to,

<a><a></a></a>

So you are getting error,

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>

To solve this just use one of the follow,

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

OR,

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>