首页 文章

Bootstrap下拉列表不能与React路由器一起使用

提问于
浏览 次
1

当Navlink位于下拉列表中时，react路由器的NavLink不会路由到相应的页面 .

在Html struture下面尝试在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（不是反应堆）

reactjs react-router bootstrap-4

1 回答

  • 0

    如果你想 not 喜欢使用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> 时不再需要的元素以及您在下拉列表中使用的一些样式，因此您可能需要对其进行调整，但是 most importantly ，当您单击下拉项时，路径更改现在可以正常工作 .

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

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

    如果您想自定义样式，他们的docs（大约在页面的中间位置）非常整洁（例如，结帐最后一个示例："Custom toggle"） .

    回复于

相关问题