Bootstrap 下拉菜单不适用于 React 路由器答案

【问题标题】：Bootstrap dropdown not working with React routerBootstrap 下拉菜单不适用于 React 路由器
【发布时间】：2019-01-18 06:29:39
【问题描述】：

当 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 路由器和 Bootstrap 4（不是 reactstrap）

【问题讨论】：

此代码是组件的一部分吗？如果是这种情况，请使用 className 而不是 class。
不使用 NavLink 或 Link => 使用浏览器（新页面/重定向），而不是应用程序的 react-router。这意味着不是一个（在某种意义上）组件被替换，而是整个应用程序重新启动。
我已经更新了实际的反应代码。我认为引导下拉切换事件会阻止路由器导航。
您的代码示例中似乎出现了问题。单击贷款下拉菜单中的管理贷款时，贷款组件不呈现。但是在点击收入下拉菜单时，它会呈现收入组件。

标签： reactjs react-router bootstrap-4

【解决方案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

【讨论】：

这有效，但一次只能用于一个下拉菜单。您需要为每个下拉菜单创建不同的状态，或者以某种方式修改代码以适用于多个下拉菜单。