我有一个导航栏,每当我单击导航栏中的链接时,它将滚动到正确的项目;但是,它不会切换为关闭状态。
我已经使用了react-bootstrap文档中建议的导航栏中的collapseOnSelect参数和事件键,但是不会切换。
class Navigation extends React.Component {
render() {
return (
<div className="nav-fixed-top">
<Navbar collapseOnSelect variant="dark" expand="md" className="bg-darkPurple">
<Navbar.Brand href="/">
<img src={logo} className="d-block" height="40" alt="logo" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" className="navbar-toggle">
<i className="fa fa-align-right"></i>
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link eventkey={1}>
<Link className="nav-link" activeClass="active"
to="Home"
spy={true}
smooth={true}
offset={-120}
duration={400}
>
Home
</Link>
</Nav.Link>
<Nav.Link eventkey={2}>
<Link className="nav-link" activeClass="active"
to="About Me"
spy={true}
smooth={true}
offset={-120}
duration={400}
>
About Me
</Link>
</Nav.Link>
<Nav.Link eventkey={3}>
<Link className="nav-link" activeClass="active"
to="Projects"
spy={true}
smooth={true}
offset={-120}
duration={400}
>
My Projects
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}