反应路由器验证DOM嵌套错误

【问题标题】：React router Validating DOM Nesting error反应路由器验证DOM嵌套错误
【发布时间】：2018-03-02 11:24:34
【问题描述】：

警告：validateDOMNesting(...)：<a> 不能作为<a> 的后代出现。见 NavigationBar > a > ... > Link > a

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

【问题讨论】：

标签： react-router

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这个错误是关于组件内部的渲染元素过多。以便在反应片段标记内尝试此命令。

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>
);

【讨论】：