How to make React-Bootstrap hamburger style menu collapse when a link inside it is clicked?

Question

I am using react-bootstrap library inside my projects, and I am designing a website where all of the content is on one page, hence all of my links are references to scroll positions of that same page. For some reason however when I click a Link element, it seems that the navbar does not collapse. I am not sure what the default functionality of the navbar is supposed to be, but I want to make it so whenever you click a Link, it collapses.

<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>

I tried passing values using javascript, but this solution is messy and it also did not work properly. Also for context, the BlinkingNavLink is a custom Link component

Answer 1

I ended up using JS at the end and this worked for me:

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;