警告：validateDOMNesting(...):<a>不能作为后代出现</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>

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>

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

Answer 4

你可以试试这个以避免错误

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

Answer 5

For the people using Gatsby. If you are using a NavBar and a NavDropdown and you want to use a Link inside a NavDropdown.Item you will get an error that:

<a> cannot be descendant of <a>

For fixing this error try using as="li" :

 <NavDropdown title="Services" id="basic-nav-dropdown">
    <NavDropdown.Item as="li">
      <Link to="/Services" className="nav-link">
        Services
      </Link>
    </NavDropdown.Item>
  </NavDropDown>

Answer 6

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