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
– Tholle, Commented Aug 10, 2018 at 15:43
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
– xadm, Commented Aug 10, 2018 at 15:48
I have updated the actual react code. I think the bootstrap dropdown toggle event prevents router navigation. — june
– june, Commented Aug 10, 2018 at 16:10
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
– june, Commented Aug 10, 2018 at 17:48

Carol Skelly · Accepted Answer · 2020-04-12 16:38:22Z

3

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

answered Apr 12, 2020 at 16:38

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charity Over a year ago

This works, but only for one dropdown at a time. You will need to create a different state for each dropdown or modify the code somehow to work for multiple dropdowns.

Md Rehan · Accepted Answer · 2024-10-13 05:15:25Z

0

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>

answered Oct 13, 2024 at 5:15

Md Rehan

3733 silver badges10 bronze badges

Collectives™ on Stack Overflow

Bootstrap dropdown not working with React router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related