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

Question

I'm trying to use react-router with reactstrap with create-react-app.

In the routing page, I needed to use state for the reactstrap, so I converted the router from a variable to a class, but 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 this:

<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></li> */}
        </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>

{/* just more of the above */}

Other than a couple of <li> coming close to each other at random times, hot reloading not working sometimes, and the warning message I get in the console, nothing bad happens, but when I read about this issue, I found out that I shouldn't do this.

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>