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

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.

score 87 · Accepted Answer · answered Apr 11 '19 at 05:56

87

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>

answered Apr 11 '19 at 05:56

ravibagul91

20,072
5
36
59

Thanx the second one worked but the ui is messed up now which is why i used reactstrap in the first place, is there any way to modify the 2nd one so i can use reactstrap link in it ? – Amr Apr 11 '19 at 07:45
@Amr If you are not bound to use NavLink from reactstrap only, then "react-router-dom" package itself giving you the NavLink, use import {NavLink} from 'react-router-dom'. – ravibagul91 Apr 11 '19 at 10:08
this didnt solve my error, i am using material ui and i have removed all Link/Nav.link tags and still the error persists – Aditya Patnaik Aug 08 '20 at 17:50
@AdityaPatnaik Can you provide the working fuddle? Will try to solve your query. – ravibagul91 Aug 10 '20 at 03:45
5

If you're using React Bootstrap's `Nav.Link` and React Router's `Link` components, you can solve this setting the `Nav.Link`'s `as` property as `div`. Docs [here](https://react-bootstrap.netlify.app/components/navs/#nav-link-props) – cpinamtz Jul 25 '21 at 17:30
@ravibagul91 where is None come from ? – sayinmehmet47 Jun 14 '22 at 21:05

score 26 · Answer 2 · edited Aug 20 '21 at 04:26

26

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>

edited Aug 20 '21 at 04:26

Raz Luvaton

3,166
4
21
36

answered Sep 15 '19 at 01:23

KSankar

559
4
10

@AdityaPatnaik, you got to import it from react-router-dom – ousecTic Oct 28 '20 at 16:04
Did that, if it were an import issue, it would hv thrown an import error. Isn't it? – Aditya Patnaik Oct 29 '20 at 05:01

score 4 · Answer 3 · edited Dec 22 '22 at 14:40

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>

score 2 · Answer 4 · answered Nov 21 '21 at 03:59

2

you can try this in order to avoid the error

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

answered Nov 21 '21 at 03:59

galo hernandez

163
1
3

in typescript it throws error of Property 'as' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes' – sayinmehmet47 Jun 14 '22 at 20:59

score 0 · Answer 5 · answered Apr 23 '22 at 13:33

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

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

5 Answers5