这意味着：

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

无效的 HTML。浏览器将识别这一点并将其转换为：

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

React 会警告你这一点，因为浏览器的修复会使实际 DOM 与虚拟 DOM 不同，当 React 更新内容时会导致奇怪的错误。

注意 React 的警告，不要嵌套<a>标签。

我的导航也收到了这个警告，我react-bootstrap用来在NavItem.

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

修复：添加componentClass属性以呈现NavItem为<span>标签而不是<a>标签（您可以在此处使用任何其他标签名称）

我的代码是

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

修复后

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

这也会弄乱样式，要修复它，请添加以下 CSS

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

您可以使用函数代替a标签：

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;

小心使用上下文。我仅使用上下文进行路由。

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

这意味着什么？

代表着：

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

和

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

并且不允许类似的构造。反正它们没有意义。

你怎么能预防呢？

如果没有人编写尝试执行此操作的代码，就不会发生这种情况。

您需要找到该代码并进行更改。

HTML、HTML5 或 React.js 中的嵌套链接是否非法？

它们在所有版本的 HTML 中都是非法的。HTML 的第一个 DTD 作为 HTML 2 的一部分发布。它说：

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

最后一部分描述了元素内允许的内容。这-(A)部分的意思是“A 元素除外”。

HTML 5 只是 2014 年对 HTML 的更新。HTML 5.1于去年（2016 年）问世。HTML 5.2正在开发中。

React.js 是一个生成 HTML DOM 的 JavaScript 库。结果仍然是（某种）HTML。