CODEWITHSUNDEEP
javascriptreactjsreact-routercreate-react-appreactstrap
Amr
Amr

Reputation: 969

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

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.

Upvotes: 85

Views: 161686

Answers (5)

NAJAF SIKANDER
NAJAF SIKANDER

Reputation: 103

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.

So, it should look like this,

<Link className="nav-link" id="RouterNavLink" style={None} to="/contact">anywords</Link>

Upvotes: 4

smit agravat
smit agravat

Reputation: 295

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

Upvotes: 1

galo hernandez
galo hernandez

Reputation: 159

you can try this in order to avoid the error

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

Upvotes: 2

KSankar
KSankar

Reputation: 609

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>

Upvotes: 27

ravibagul91
ravibagul91

Reputation: 20755

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>

Upvotes: 104

Related Questions