警告：validateDOMNesting（...）： cannot appear as a descendant of

Question

我正在尝试使用react-reat-app中的reactstrap的react-router。在路由页面中，我需要使用状态为reactstrap，所以我将路由器从变量转换为类。我收到此警告：警告： validateDOMNesting（...）：<a> cannot appear as a descendant of <a>.我不知道该怎么办？，我需要使用reactstrap来设置路由器导航的风格，所以我做了你在下面看到的。

由于这么多原因，这不起作用：

<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 not relevant)</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>
(then just more of the above)

除了几个李随机时间彼此接近而且我不得不刷新页面而不是正常行为（自动刷新）和我在控制台中得到的警告信息，不是很糟糕但是当我读到这个时问题我发现我不应该这样做。

Answer 1

这是导致错误的代码，

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

哪个转换为，

<a><a></a></a>

所以你得到错误，

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>

要解决这个问题，只需使用以下其中一项，

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

要么，

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>