在 react-router 版本 6.4.1 中单击其他 NavLink 后，第一个 NavLink 始终处于活动状态

Question

我有 4 个 NavLinks 并且我使用 className 回调函数来激活 Nav，但是我的第一个 NavLink 始终处于活动状态，即使我点击其他的类也会在两者上添加。如何解决这个问题：-

<>
      <Nav variant="tabs" className="report_tabs">
        <Nav.Item>
          <NavLink
            className={({ isActive }) => (isActive ? "active" : "")}
            to="/dashboard/report/dealer-order"
          >
            Dealer Order
          </NavLink>
        </Nav.Item>
        <Nav.Item>
          <NavLink
            className={({ isActive }) => (isActive ? "active" : "")}
            to="/dashboard/report/dealer-order-products"
          >
            Dealer Order Products
          </NavLink>
        </Nav.Item>
        <Nav.Item>
          <NavLink
            className={({ isActive }) => (isActive ? "active" : "")}
            to="/dashboard/report/dealer-order-comparison"
          >
            Dealer Order Comparison
          </NavLink>
        </Nav.Item>
        <Nav.Item>
          <NavLink
            className={({ isActive }) => (isActive ? "active" : "")}
            to="/dashboard/report/lead-time-report"
          >
            Lead Time Report
          </NavLink>
        </Nav.Item>
      </Nav>
      <div className="report_content">
        <Outlet />
      </div>
    </>

注意：-Navlink & Outlet 已成功导入文件

这段代码有什么问题？

标签看起来像这样：-

如何一次激活一个 NavLink

Answer 1

试试这个伙伴

     <NavLink
            activeClassName= 'active'
            to="/dashboard/report/lead-time-report"
          >
            Lead Time Report
     </NavLink>

为你所有的导航链接做这个，它应该工作 在你的 CSS 中

.active {
  font-weight: bold;
  // Any style you want for your active
}