React router验证DOM嵌套错误

Question

警告：validateDOMNesting（...）：<a>不能作为<a>的后代出现。见NavigationBar＆gt; a＆gt; ...＆gt;链接＆gt;一个

<a className="ui item nav-logout font-color">
        {isLoggedIn ? (
          <Link onClick={this.logout} to="/" >
            Logout
          </Link>
        ) : (
          <Link to="/login">Login</Link>
        )}

Answer 1

您正在将<a>标记嵌套到另一个<a>标记中，将父级更改为<div> / <span>（或<li>如果您的导航项为在列表中）：

<span className="ui item nav-logout font-color">

Answer 2

此错误与组件内部的太多渲染元素有关。因此请在react fragment标签内尝试此命令。

return(
<React.Fragment >

<a className="ui item nav-logout font-color">
        {isLoggedIn ? (
          <Link onClick={this.logout} to="/" >
            Logout
          </Link>
        ) : (
          <Link to="/login">Login</Link>
        )}


</React.Fragment>
);