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>.....