时间戳

首页 > 解决方案 > React Router v6 的 NavLink 上缺少 isActive 属性

reactjs - React Router v6 的 NavLink 上缺少 isActive 属性

问题描述

NavLink包的组件react-router-dom支持添加额外的逻辑来确定链接是否处于活动状态。至少旧版本支持这一点。这是文档的链接：https ://reactrouter.com/web/api/NavLink/isactive-func

代码片段：

<NavLink
  to="/events/123"
  isActive={(match, location) => {
    if (!match) {
      return false;
    }

    // only consider an event active if its event id is an odd number
    const eventID = parseInt(match.params.eventID);
    return !isNaN(eventID) && eventID % 2 === 1;
  }}
>
  Event 123
</NavLink>

版本 6 中似乎isActive不再支持属性。还有哪些其他选项可以实现相同的目标？

标签： reactjsreact-router-dom

解决方案

NavLink activeClassName 道具不再存在。使用该道具，您可以为该特定链接传递一个类，以使用一些 CSS 进行修改以显示它已变为活动状态，如下所示：

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink activeClassName="active" to="/about" />
        </li>
        <li>
          <NavLink activeClassName="active" to="/profile" />
        </li>
      </ul>
    </header>
  )
}

使用 V6，您必须手动执行此操作，您可以通过将函数传递给我们在 React 上拥有的 className 属性，如下所示：

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}

推荐阅读