如何在 react.js 中单击时隐藏可折叠的 Bootstrap 4 导航栏

Question

I have created this Navbar using boostsrap 4, but i want it to get collapse when i click on the link, Any way to do this? Thanks. please help me i'm stuck here.

import moon from '../Images/moon.ico'
import  {  NavLink } from 'react-router-dom'



const NavBar = () => {
    return(
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
  <NavLink to='/' className="navbar-brand"><img src={moon} alt="logo" className="logo-img"/></NavLink>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <div className="collapse navbar-collapse" id="navbarNav">
    <ul className="navbar-nav">
      <li className="nav-item">
        <NavLink to="/" className="nav-link">Home</NavLink>
      </li>
      <li className="nav-item">
        <NavLink to="/about"  className="nav-link">About</NavLink>
      </li>
      <li className="nav-item">
        <NavLink to='/skill'  className="nav-link">Skills</NavLink>
      </li>
      <li className="nav-item">
        <NavLink to="/project"  className="nav-link">Projects</NavLink>
      </li>
    </ul>
  </div>
</nav>
    )
}

export default  NavBar```

Answer 1

Here is a very basic example: https://codepen.io/larrytherabbit/pen/YzqYdPL

 function closeNav() { document.getElementById("navbar").style.display = "none"; }

 #navbar { width:60%;background:blue;height:100px;color:white;font-weight:bold;font-size:20px; }

 <div id="navbar"> i am a navbar </div> <br><br><br> <a href="javascript:void(0);" onclick="closeNav()">click on me to close navbar</a>