在移动视图中单击链接时折叠Bootstrap 4导航栏

Question

我正在在reactjs中使用bootstrap 4折叠导航栏。我想在移动视图中的导航栏内单击liknk时折叠导航栏。

<nav id="navbar" className="container navbar navbar-expand-md  fixed-top navbar-dark ">
   <a href="#home" className="navbar-brand" onClick={()=>onLinkClick('home')} >
      <img src="/images/logo.png" className="logo-lg"/>
      <img src="/images/logo-sm.png"  srcset="/images/logo-sm@2x.png 2x, images/logo-sm@3x.png 3x" className="logo-sm" />
   </a>

   <button class="navbar-toggler collapsed" onClick={()=>onToggleButtonClick()} type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      {closeIconToggle ?<span class="navbar-toggler-icon"></span>:
         <img  src="/images/close-svg.svg" alt="close-icon"></img>                                    
      }
   </button>
   <div class="collapse navbar-collapse hide " id="navbarTogglerDemo01">

      <ul class="navbar-nav ml-auto ">
         <li className={" navigation__link  "+(navLinkObj.home? 'selected' :'')}>
            <a className="nav-link "    onClick={()=>onLinkClick('home')}  href="#home">
            HOME
            <span className= "li-border"></span>
            </a>
         </li>
         <li className={"navigation__link  "+(navLinkObj.solution? 'selected ' :'')}>
            <a className="nav-link " onClick={()=>onLinkClick('solution')}   href="#solution">
               SOLUTION
               <span className= "li-border"></span>
            </a>

         </li>
         <li className={"navigation__link  "+(navLinkObj.footprint? 'selected  ' :'')}>
            <a  className="nav-link "   onClick={()=>onLinkClick('footprint')}  href="#footprint">
               FOOTPRINT
               <span className= "li-border"></span>
            </a>
         </li>
         <li className={"navigation__link "+(navLinkObj.services? 'selected ' :'')}>
            <a className="nav-link " onClick={()=>onLinkClick('services')}   href="#services">
               SERVICES
               <span className= "li-border"></span>
                                        </a>
         </li>

      </ul>                           
   </div>

</nav>

我在下面尝试了nav-link，它可以正常工作。但是这导致了deskotp中nav链接的点击问题。

data-toggle="collapse" data-target=".navbar-collapse.show"