Link cannot appear as a descendant of a link

Question

A React.js app gives the warning

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

What does that mean? How can you prevent it? Are nested links illegal in HTML, HTML5 or React.js?

Answer 1

That means:

<a href="1">
    <a href="2"></a>
</a>

Is invalid HTML. Browsers will recognize this and turn this into:

<a href="1"></a>
<a href="2"></a>

React warns you about this because the browser's fix will make the actual DOM different from the virtual DOM, leading to strange bugs when React goes to update stuff.

Heed React's warning and don't nest <a> tags.

Answer 2

I was also getting this warning for my Navigaion, I was using react-bootstrap to render React Router Link in NavItem.

Warning: validateDOMNesting <a> cannot appear as a descendant of <a>. in a (created by Link)

Fix: Add "componentClass" attribute to render NavItem as <span> tag instead of <a> tag (You can use any other tag name here)

My code was

<Nav pullRight>
  <NavItem>
    <Link to="/responses">Responses</Link>
  </NavItem>
</nav>

After fix

<Nav pullRight>
  <NavItem componentClass='span'>
    <Link to="/responses">Responses</Link>
  </NavItem>
</nav>

This also messes up styling, to fix it add following CSS

.navbar-nav span[role=button] {
  padding: 15px;
  display: inline-block;
  line-height: 20px;
}

Answer 3

What does that mean?

It means that:

<a href="http://example.com">
  <span>
    <a href="http://example.net">
        ...
    </a>
  </span>
</a>

and

<a href="http://example.com">
    <a href="http://example.net">
        ...
    </a>
</a>

and similar constructs are not allowed. They don't make sense anyway.

How can you prevent it?

This isn't something that happens without someone writing code that tries to do it.

You need to find that code and change it.

Are nested links illegal in HTML, HTML5 or React.js?

They are illegal in all versions of HTML. The first DTD for HTML was published as part of HTML 2. It says:

<!ELEMENT A     - - %A.content -(A)>

The last part describes what content is allowed inside the element. The -(A) part of that means "Except for A elements".

HTML 5 is just the 2014 update to HTML. HTML 5.1 came out last year. HTML 5.2 is under development.

React.js is a JavaScript library that generates an HTML DOM. The results are still (sort of) HTML.

Answer 4

You can use a function instead of 'a' tag:

import React from 'react';
import PropTypes from 'prop-types';
import {Link, withRouter} from 'react-router';

   class SomeClass extends React.Component {
    constructor(props,context) {
        super(props,context);
        this.redirect = this.redirect.bind(this);
    }

    redirect(target){
        this.context.router.push("/path");
    }



render() {
        return (
            <div>
                <p onClick={this.redirect}>Link</p>
            </div>
        );
    }
}

SomeClass.contextTypes ={
    router: PropTypes.object
};

export default SomeClass;

Be careful to use a context. I'm using a context for routing only.

   class SomeClass extends React.Component {
    constructor(props,context) {
        super(props,context);
        this.redirect = this.redirect.bind(this);
    }