React Bootstrap导航

问题描述

我正在尝试创建导航，但是activeKey坚持使用值“ 1”。而且我不能使用React的'to'属性。

constructor(state) {
    super(state);
    this.state = {
        activeKey: 1
    };
}

handleSelect(eventKey) {
    this.setState({
        activeKey: eventKey
    })
}

<Nav variant="pills" activeKey={this.state.activeKey}
 onSelect={() => this.handleSelect(this)}>

     <NavItem>
            <NavLink exact eventKey="1" href="/">Home</NavLink>
     </NavItem>

</Nav>

解决方法

您应将活动事件键传递给onSelect回调。

onSelect={key => this.handleSelect(key)}

或

onSelect={this.handleSelect}

,

要使用to =“ / something”，您需要使用来自https://github.com/react-bootstrap/react-router-bootstrap

的LinkContainer组件包装NavLink。