Question

这是一个微不足道的问题，但我没有找到确切的答案。我的导航栏有以下链接，我使用React-Router添加了链接：

 <Nav>
     <NavItem><IndexLink to="/" activeClassName="active">Home</IndexLink></NavItem>
     <NavItem><Link to="/courses" activeClassName="active">Courses</Link></NavItem>
     <NavItem><Link to="/manageCourses" activeClassName="active">Manage Courses</Link></NavItem>
     <NavItem><Link to="/about" activeClassName="active">About</Link></NavItem>
 </Nav>

然而，我正在接受这样的连续警告：

validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See HeaderMenu > NavItem > SafeAnchor > a > ... > IndexLink > Link > a.

我不知道我在哪里做了无效的嵌套，因为我假设反应路由器的Link to可以嵌套在navItem中。

很多帮助将不胜感激。

Answer 1

基本上，<NavItem>和<Link>似乎都会呈现<a>标记。

您需要更改其中一个。由于我假设<Link>来自react-router，并且猜测<NavItem>可能来自react-bootstrap，我说你可能需要放弃<NavItem>和自己实现那部分。看起来目前这两个人不能很好地一起玩。

你也可以走另一条路，然后放弃<Link>。除了一些特殊情况，您并不特别需要使用<Link>本身。它确实为您提供了activeClassName位，但也可以单独实现。

看起来另一种选择是使用LinkContainer中的react-router-bootstrap，它似乎试图将两者联系起来。

Answer 2

您不应该将锚放在NavItem中。

那是因为当渲染NavItem时，锚已经存在。

试试这个 `

<Nav> 
     <LinkContainer to="/" >
        <NavItem>Home</NavItem>
    </LinkContainer>
</Nav>

使用React-Redux为Provider提供有效的DOM嵌套

2 个答案: