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>を捨てて、自分で実装する必要があるかもしれません。現在のように見える2人はうまく一緒にスーパーを果たしていない。

あなたは他の方法でも行くことができ、<Link>を捨てることができます。特殊な場合を除いて、特に<Link>を使用する必要はありません。それはあなたにactiveClassNameビットを与えますが、それは別々に実装することもできます。

LinkContainerをreact-router-bootstrapから使用すると、2つのブリッジを試してみるようです。