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

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.

Solution 1:^[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>

Solution 2:^[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>

Solution 3:^[3]

I would like to suggest an alternate solution which not only solve your problem but give you desired result. In any case someone else stumbled on this post like I did.

Use Link jsx element offered by react router dom but add classname="nav-link" to it. This will give you styling of the NavLink jsx which react strap is using.

Solution 4:^[4]

you can try this in order to avoid the error

<NavItem as="li"> <Link>.....

Solution 5:^[5]

I had same problem. It is because we can not use link, or a tag inside another like...

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

I wanted to apply className to my a tag in navigation bar. so i applied className to a tag in component and import that component in navigation bar component

<a className="nav-link" onClick={() => loginWithRedirect()}>
    Login
  </a>

This is how i use this link in navigation template,without any classname

<LoginButton />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ravibagul91
Solution 2	Raz Luvaton
Solution 3	John Conde
Solution 4	galo hernandez
Solution 5	smit agravat

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]