当我单击 react.js 中的链接时折叠导航栏

Question

well as you can see this is an ordinary navbar code, what i'm trying to do is just when the user clicks on the any links/buttons inside the <Navbar.Collapse id="navbar"> it should collapse, Thanks in advance!

<Navbar bg="light" expand="md">
                <Container fluid>
                    <Navbar.Brand href="/">
                        <LOGO />
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="navbar">
                        {/* <FaBars /> */}
                    </Navbar.Toggle>
                    <Navbar.Collapse id="navbar">
                        <Nav className="my-3 my-md-auto">
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                to="/"
                                className="rounded-circle nav-link"
                            >
                                <FaHome />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Home
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/Blog"
                            >
                                <FaBlog />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Blog
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/Portfolio"
                            >
                                <FaFolder />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Portfolio
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/About"
                            >
                                <FaExclamationCircle />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    About
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/Contact"
                            >
                                <FaEnvelope />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Contact
                                </span>
                            </NavLink>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>

Answer 1

Listen to the router change event with the useLocation Hook from react-router-dom

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function SomeComponent() {
  const location = useLocation();

  useEffect(() => {
    console.log('Location changed');
    // change the navbar view state here
  }, [location]);

  //Rest of the code
}