引导下拉列表不适用于 React 路由器

Question

当 Navlink 驻留在下拉列表中时，反应路由器的 NavLink 不会路由到相应的页面。

下面是试图在 React 中实现的 HTML 结构

<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(

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