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

Question

這是一個微不足道的問題，但我沒有找到確切的答案。我的導航欄有以下鏈接，其中我添加使用陣營 - 路由器：

<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中。

這是因爲當NavItem呈現時，錨點已經存在。

試試這個 `

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

Answer 2

基本上，它看起來像<NavItem>和<Link>呈現一個<a>標記。

您需要更改其中一個。由於我假設<Link>是從react-router，並猜測<NavItem>可能從react-bootstrap，我會說你可能需要溝通<NavItem>並自己實現該部分。看起來目前這兩人並沒有很好地打在一起。

你可以去其他的方式，並溝<Link>。除少數特殊情況外，您並不特別需要使用<Link>本身。它確實爲您提供activeClassName位，但也可以單獨實施。

看起來像另一種選擇是從react-router-bootstrap使用LinkContainer，這似乎嘗試和橋接兩者。