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>

“/”和“/海员”均已激活class

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

我该如何解决这个问题？

Answer 1

对于react-router-dom v6

此示例演示如何使用 useMatch() 和 useResolvedPath() 挂钩制作自定义 <Link> 组件以在 link 处于“活动”状态时呈现不同的内容。

Official doc for active link

Answer 2

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

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

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

react-router-dom v6 NavLink is always active

react-router

react-router-dom