How can I collapse a Bootstrap React Navbar after clicking on a link?

Question

I have used a Bootstrap React Navbar. When the screen gets small, all the links go into a Navicon. I am trying to close the Navicon after clicking on a link, but cant make it work.

import { useState } from 'react'
import { Navbar, Nav } from 'react-bootstrap'
import { NavLink, Link } from 'react-router-dom'
import './Navigation.css'
import logo from './logo.png'

const Navigation = ({ handleAlert }) => {

    const [changeClass, setChangeClass] = useState(false)
    document.addEventListener('scroll', (e) => scrollNav(e))

    function scrollNav(e) {
        const scrollTop = window.pageYOffset
        if (scrollTop > 120) setChangeClass(true)
        else if (scrollTop < 120) setChangeClass(false)
    }

    function toggle() {
        console.log('???')
    }


    return (
        <Navbar expand="md" className={changeClass ? "navb filled" : "navb"} fixed="top" >
            <Link to="/personal-page">
                <Navbar.Brand> <img
                    alt="logo"
                    src={logo}
                    width="40"
                    height="40"
                    className="d-inline-block align-top"
                />{' '}</Navbar.Brand>
            </Link>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <NavLink to="/about" exact>
                        <Nav.Link as="span" onClick={() => toggle()}>About & Skills</Nav.Link>
                    </NavLink>
                    <NavLink to="/portfolio">
                        <Nav.Link as="span" onClick={() => toggle()}> Portfolio </Nav.Link>
                    </NavLink>


                </Nav>
            </Navbar.Collapse>
        </Navbar >
    )
}

export default Navigation

any ideas on how to solve this?

Thanks in advance

Answer 1

please try this:

import { useState } from "react";
import { Container, Navbar, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";
export const AppNavbar = () => {
  const [expanded, setExpanded] = useState(false);
  return (
    <Navbar expanded={expanded} bg="light" expand="lg">
      <Container fluid>
        <Navbar.Brand>My Expenses</Navbar.Brand>
        <Navbar.Toggle
          aria-controls="navbarScroll"
          onClick={() => setExpanded(!expanded)}
        />
        <Navbar.Collapse id="navbarScroll">
          <Nav className="me-auto my-2 my-lg-0" navbarScroll>
            <Link
              to="/"
              className="nav-link"
              onClick={() => setExpanded(false)}
            >
              Home
            </Link>
            <Link
              to="expenses"
              className="nav-link"
              onClick={() => setExpanded(false)}
            >
              Expenses
            </Link>
            <Link
              to="invoices"
              className="nav-link"
              onClick={() => setExpanded(false)}
            >
              Invoices
            </Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};