react-router-dom v6 NavLink 始终处于活动状态

Question

我按照从 v5 升级指南进行操作，但无法使 NavLink 组件正常工作。

https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5

v6 导航链接：

    <NavLink
          className={(isActive) =>
            cx(isActive ? classes.linkActive : classes.link)
          }
          to="/seafarers"
          end
        >
          Seafarers
        </NavLink>
        <NavLink
          className={(isActive) =>
            cx(isActive ? classes.linkActive : classes.link)
          }
          end
          to="/"
        >
          Planning
        </NavLink>

路线

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginScreen />} />
        <Route path="login" element={<LoginScreen />} />
        <Route path="forgot-password" element={<ForgotPasswordScreen />} />
        <Route path="seafarers" element={<SeafarersScreen />} />
      </Routes>
    </BrowserRouter>

“/”和“/seafarers”都有活跃等级

注意：NavLink 元素位于 SeafarersScreen 屏幕中

我该如何纠正这个问题？

Answer 1

结果我不得不解构 className 的属性，因为三元运算符总是为对象返回 true

    <NavLink
          className={({isActive}) => //(isActive) --> ({isActive})
            cx(isActive ? classes.linkActive : classes.link)
          }
          to="/seafarers"
          end
        >
          Seafarers
        </NavLink>

Answer 2

在父路由上添加end属性。这适用于react-router-dom：6.4.4。

    <NavLink
        to="/"
        end
        className={({ isActive }) =>`nav-link ${isActive && 'active'}`}>
      Notes
    </NavLink>

从react-router文档中，这里是链接： https: //reactrouter.com/en/main/components/nav-link