在react-bootstrap中实现react-router NavLink并启用onSelect属性

Question

我正在尝试使用react-bootstrap和react-router的NavLink创建一个响应式导航栏。我想实现NavLink，以便使用react-router导航到页面并使用其activeClassName属性。

方法：在Navbar（react-bootstrap）中添加了onToggle并扩展了属性。添加了将响应状态更改为NavLink（react-router-dom）的onClick处理程序。我这样做是为了重新创建Navbar的onSelect属性，该属性不适用于NavLink。

问题：打开下拉菜单后，除非单击链接，否则无法再次关闭它。菜单下拉后，汉堡切换按钮将无响应。

class MainNav extends Component{
    state= {
        navExpanded: false
    }

    setNavExpanded = () =>{
        this.setState({
            navExpanded:true
        })
    }

    setNavClosed = () => {
        this.setState({
            navExpanded:false
        })
    }
    render(){
        return(
            <div className="navdiv" >
                <Navbar 
                expand="md"
                onToggle={this.setNavExpanded}
                expanded={this.state.navExpanded}
                >
                    {
                        this.props.location.pathname!=="/" ? (<Link to="/">BRAND</Link>): (<Link to="/" className="disabled-link">BRAND</Link>)
                    }
                    <Navbar.Toggle  aria-controls="basic-navbar-nav"/>
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto">
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" exact to="/">Home</NavLink>
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" to="/workshops">WorkShops</NavLink>
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" to="/products">Products</NavLink>
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" to="/about">About</NavLink>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>       
            </div>
        )

    }
}
export default MainNav