Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>
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>
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.
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>
you can try this in order to avoid the error
<NavItem as="li"> <Link>.....