如何让 React-Bootstrap 汉堡风格的菜单在点击其中的链接时折叠？

Question

我在我的项目中使用react-bootstrap库，并且我正在设计一个网站，其中所有内容都在一个页面上，因此我的所有链接都是对该同一页面的滚动位置的引用。然而，由于某种原因，当我单击链接元素时，导航栏似乎没有折叠。我不确定导航栏的默认功能应该是什么，但我想让它在您单击链接时它就会折叠。

<Navbar
      bg="dark"
      expand="lg"
      className={`row z-2 ${visible ? "navbar-visible" : "navbar-hidden"}`}
      sticky="top"
    >
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mx-auto space-evenly w-100 d-flex justify-content-between align-items-center px-5">
          <BlinkingNavLink
            to="scroll-here-intro"
          >
            about
          </BlinkingNavLink>
          <BlinkingNavLink
            to="scroll-here-skills"
          >
            skills
          </BlinkingNavLink>
          <BlinkingNavLink
            to="scroll-here-education"
          >
            education
          </BlinkingNavLink>
          <BlinkingNavLink
            to="scroll-here-projects"
          >
            projects
          </BlinkingNavLink>
          {/* NavDropdown can remain as is for non-NavLink items */}
        </Nav>
      </Navbar.Collapse>
    </Navbar>

我尝试使用 javascript 传递值，但是这个解决方案很混乱，而且也无法正常工作。另外，对于上下文，BlinkingNavLink 是一个自定义链接组件

Answer 1

我最终使用了 JS，这对我有用：

function MyNavbar() {
  const [expanded, setExpanded] = useState(false);

  const handleCollapse = () => {
    setExpanded(false);
  };

  return (
    <Navbar expanded={expanded} bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle onClick={() => setExpanded(!expanded)} aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home" onClick={handleCollapse}>Home</Nav.Link>
          <Nav.Link href="#link" onClick={handleCollapse}>Link</Nav.Link>
          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1" onClick={handleCollapse}>Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2" onClick={handleCollapse}>Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3" onClick={handleCollapse}>Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4" onClick={handleCollapse}>Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default MyNavbar;