Bootstrap dropdown not working with React router

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)

Is this code part of a component? Use className instead of class if that's the case. — Tholle
Not using NavLink or Link => using browser (new page/redirect), not app's react-router. That means not one (in some sense) component replaced but entire app restarted. — xadm
I have updated the actual react code. I think the bootstrap dropdown toggle event prevents router navigation. — june
It seems the issue occurs in your codeply example. On clicking the manage loan in the dropdown menu of the loan, the loan component doesnt rendered. but on clicking the revenue dropdown, it rendered the revenue component. — june

Zim Zim · Accepted Answer · 2020-04-12T16:38:22

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

Bootstrap dropdown not working with React router

1 Answers