Bootstrap dropdown not working with React router - reactjs

Question

The NavLink of react router does not route to the appropriate page when the Navlink reside in the dropdown.
Below the Html struture tried to implement in React
<BrowserRouter>
<header className="menubar">
<nav className="navbar navbar-expand-sm">
<button className="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="menu">
<ul className="navbar-nav">
<li className="nav-item">
<div className="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="loanlink">
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className="dropdown-menu dropdown-menu-center" aria-labelledby="loanlink">
<div className="menuPointer"></div>
<NavLink className="dropdown-item" to="/loan">
<div className="menuContent">
<span className="menuTitle">Manage Loan</span>
</div>
</NavLink>
</div>
</div>
</li>
<li className="nav-item">
<NavLink className="nav-link dropdown-toggle" to="/revenue" >
<span className="menuTitle">Revenue</span>
</NavLink>
</li>
</ul>
</div>
</nav>
</header>
</BrowserRouter>
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.
I think the dropdown toggle event prevents the react router navigation.
Am using React router and Bootstrap 4 (not reactstrap)

Answer 1

This is a late answer, but the problem is that Bootstrap's data-toggle for the Dropdown is preventing the route from working.
You can solve it by toggling the Dropdown using React state, instead of using the data-toggle behavior in Bootstrap.
<li className="nav-item">
<div className="dropdown" display="static" onClick={this.handleClick}>
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className={this.state.showDD?'dropdown-menu show':'dropdown-menu'}>
<NavLink className="dropdown-item" to="/loan">
<span>Manage Loan</span>
</NavLink>
</div>
</div>
</li>
https://codeply.com/p/auvCgEmeiD