Question

当Navlink驻留在下拉菜单中时，React路由器的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>

在上面的代码中，不是下拉菜单的“收入”链接可以正常工作，但是下拉菜单内部的链接却无法正常工作。

我认为下拉切换事件会阻止反应路由器导航。

Am使用React路由器和Bootstrap 4（不是reactstrap）

Answer 1

这是一个较晚的答案，但是问题是Bootstrap的data-toggle下拉菜单阻止了路由的工作。

您可以通过使用React状态（而不是在Bootstrap中使用data-toggle行为）切换Dropdown来解决此问题。

       <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

Answer 2

如果您不不想使用react-bootstrap，则可能不是您的答案。但是，我遇到了一个非常相似的问题，这就是我的解决方法，因此它可能会对其他人有所帮助...

import { ButtonGroup, Dropdown, DropdownButton } from "react-bootstrap";

...

<ButtonGroup>  // <- replaces your: <li className="nav-item">
  <DropdownButton as={ButtonGroup} title="Loan" id="loanlink">
    <Dropdown.Item href="/loan">Manage Loan</Dropdown.Item>
  </DropdownButton>
</ButtonGroup>

我删除了使用<ButtonGroup>时不再需要的元素以及下拉菜单所具有的某些样式，因此您可能不得不适应这种情况，但最重要的现在，当您单击下拉菜单项时，更改应该起作用。

此外，您应该可以嵌套在<ul/>元素中以适合您的情况：

<ul>
  <ButtonGroup/>
  <ButtonGroup/> 
</ul>

如果您想自定义样式，它们的docs（大约位于页面的一半）非常整洁（例如，查看最后一个示例：“自定义切换”）。

Bootstrap下拉列表不适用于React Router

2 个答案: