我正在使用React与react-router 2.0.0-rc4,react-bootstrap 0.28.2和react-router-bootstrap 0.20.1.我有导航栏主要使用以下结构,但.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设置为什么).我有一个更大的菜单,当点击任何菜单项时,所有导航项都被设置为活动状态.我错过了什么？
我不认为这个Q是@L_502_0@的副本,因为React-Bootstrap组件应该通过activeKey prop自动管理活动状态,但是..文档没有显示这个的明显例子,所以,困惑:(
解决方法
如果您的路线看起来像
<Route path="/"> <Route path="login" /> </Route>
那么你将要使用< IndexLinkContainer>而不是< LinkContainer>对于to =“/”链接.