CODEWITHSUNDEEP
reactjsreact-routerbootstrap-4
june
june

Reputation: 101

Bootstrap dropdown not working with React router

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)

Upvotes: 3

Views: 3208

Answers (2)

Md Rehan
Md Rehan

Reputation: 353

Simply use Link in the place of a (anchor) tag as shown below:

<li className="nav-item dropdown">
   <a className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
   <ul className="dropdown-menu">
      <li><Link className="dropdown-item" to="/about">About us</Link></li>
      <li><Link className="dropdown-item" to="/mission-and-vision">Mission & Vision</Link></li>
   </ul>
</li>

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 3

Related Questions