title: Bootstrap dropdown not working with React router
body: <p>The NavLink of react router does not route to the appropriate page when the Navlink reside in the dropdown.</p>
  
  <p>Below the Html struture tried to implement in React</p>
  
  <pre><code>&lt;BrowserRouter&gt;
      &lt;header className="menubar"&gt;
          &lt;nav className="navbar navbar-expand-sm"&gt;
          &lt;button className="navbar-toggler" data-toggle="collapse" data-target="#menu"&gt;
              &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div className="collapse navbar-collapse" id="menu"&gt;
              &lt;ul className="navbar-nav"&gt;
              &lt;li className="nav-item"&gt;
                     &lt;div className="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="loanlink"&gt;
                         &lt;a href="#!" className="nav-link dropdown-toggle"&gt;
                         &lt;span className="menuTitle"&gt;Loan&lt;/span&gt;
                         &lt;/a&gt;
                         &lt;div className="dropdown-menu dropdown-menu-center" aria-labelledby="loanlink"&gt;
                         &lt;div className="menuPointer"&gt;&lt;/div&gt;
                           &lt;NavLink className="dropdown-item" to="/loan"&gt;                                
                                     &lt;div className="menuContent"&gt;
                                     &lt;span className="menuTitle"&gt;Manage Loan&lt;/span&gt;
                                     &lt;/div&gt;
                          &lt;/NavLink&gt;
                         &lt;/div&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
               &lt;li className="nav-item"&gt;
                    &lt;NavLink className="nav-link dropdown-toggle" to="/revenue" &gt;
                       &lt;span className="menuTitle"&gt;Revenue&lt;/span&gt;
                    &lt;/NavLink&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>In the above code, the "revenue" link which is not dropdown-menu is working fine, but the links which are inside dropdown-menu is not working. </p>
  
  <p>I think the dropdown toggle event prevents the react router navigation.</p>
  
  <p>Am using React router and Bootstrap 4 (not reactstrap)</p>