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> 

Answer 2

Add the as prop (formerly componentClass) to your original NavLink to keep the styling while also silencing the warning.

See react-bootstrap#nav-link-props docs

Or View Screenshot

Original:

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

New:

<Nav.Link as={Link} to="/contact">anywords</Nav.Link>