reactjs - Bootstrap 下拉菜单不适用于 React 路由器

Question

当 Navlink 驻留在下拉列表中时，react router 的 NavLink 不会路由到适当的页面。

下面的Html结构试图在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>

在上面的代码中，不是下拉菜单的“收入”链接工作正常，但下拉菜单内的链接不起作用。

我认为下拉切换事件阻止了 react 路由器导航。

我正在使用 React 路由器和 Bootstrap 4(不是 reactstrap)

Answer 1

这是一个迟到的答案，但问题是 Bootstrap 的下拉列表的 data-toggle 阻止了路由的工作。

您可以通过使用 React 状态切换下拉菜单来解决此问题，而不是使用 Bootstrap 中的 data-toggle 行为。

       <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