React-BootstrapのNav NavitemでReact-Routerを処理する方法

Question

私はreact-router 2.0.0-rc4、react-bootstrap 0.28.2、およびreact-router-bootstrap 0.20.1のReactを使用しています。私は、ナビゲーションバーには、主に次のような構造で作業していますが、.activeクラスが正しく適用されません。

<Navbar> 
    <Nav activeKey={ this.state.selectedKey } onSelect={ this._onSelect } > 
     <LinkContainer to="/"> 
     <NavItem eventKey={1}>Home</NavItem> 
     </LinkContainer> 
     <LinkContainer to="/login"> 
     <NavItem eventKey={2}>Login</NavItem> 
     </LinkContainer> 
     ... 
    </Nav> 
    </Navbar> 

問題は、私は、メニュー項目間を移動するよう.activeクラスが未設定のないことです。したがって、NavItem 2をクリックすると、両方の項目がアクティブになります（this.state.selectedKeyに設定されている場合でも）。私は大きなメニューを持っており、すべてのナビゲーション項目は、メニュー項目がクリックされたときにアクティブとして設定されます。私は何が欠けていますか？

、リアクト・ブートストラップコンポーネントはactiveKey小道具を経由して自動的にアクティブ状態を管理することになっているので、私は、このQはthis postの複製であるとは思いませんが、...ドキュメントはこの明確な例を示していないので、あなたのルートが

<Route path="/"> 
    <Route path="login" /> 
</Route> 

のように見える場合は、混乱:(

Answer 1

その後、あなたはto="/"リンク用<IndexLinkContainer>ではなく<LinkContainer>を使用することをお勧めします。

Answer 2

<LinkContainer>とすると、eventKeyは不要なので削除できます。そうすると、activeが正しく処理されます。

ですから、

<Navbar> 
    <Nav> 
     <LinkContainer to="/"> 
     <NavItem>Home</NavItem> 
     </LinkContainer> 
     <LinkContainer to="/login"> 
     <NavItem>Login</NavItem> 
     </LinkContainer> 
     ... 
    </Nav> 
    </Navbar> 

で終わります