How to handle .active state in React-Bootstrap's Nav NavItem, with React-Router
<p>I'm using using React with <code>react-router 2.0.0-rc4</code>, <code>react-bootstrap 0.28.2</code>, and <code>react-router-bootstrap 0.20.1</code>. I have the nav bar mostly working with the following structure, but the <code>.active</code> class is not applied correctly:</p>
<pre><code>  &lt;Navbar&gt;
    &lt;Nav activeKey={ this.state.selectedKey } onSelect={ this._onSelect } &gt;
      &lt;LinkContainer to=&quot;/&quot;&gt;
        &lt;NavItem eventKey={1}&gt;Home&lt;/NavItem&gt;
      &lt;/LinkContainer&gt;
      &lt;LinkContainer to=&quot;/login&quot;&gt;
        &lt;NavItem eventKey={2}&gt;Login&lt;/NavItem&gt;
      &lt;/LinkContainer&gt;
      ...
    &lt;/Nav&gt;
  &lt;/Navbar&gt;
</code></pre>
<p>The problem is that the <code>.active</code> class is not unset as I move between the menu items. So, if I click NavItem 2, both items become active (no matter what <code>this.state.selectedKey</code> is set to). I have a larger menu and all nav items get set as active when any menu item is clicked. What am I missing?</p>
<p>I do not think this Q is a duplicate of <a href="https://stackoverflow.com/questions/30376922/how-to-manage-active-state-in-bootstrap-navbar-in-react">this post</a> because the React-Bootstrap components are supposed to manage the active state automatically via the <code>activeKey</code> prop, but.. the docs do not show a clear example of this, so, confused :(</p>