React Router 6+：如何在NavLink外部使用isActive值？

我有如下JSX代码：

<div className="sidebar__link">
  <i class="fa-solid fa-circle"></i>
  <NavLink
    end
    to="/"
    className={({ isActive }) =>
      isActive ? "selected" : ""
    }
  >
    Home
  </NavLink>
</div>
<div className="sidebar__link">
  <i class="fa-solid fa-circle"></i>
  <NavLink
    end
    to="/profile"
    className={({ isActive }) =>
      isActive ? "selected" : ""
    }
  >
    User Profile
  </NavLink>
</div>

想利用isActive值切换图标样式，尝试了以下代码：

<div className="sidebar__link">
  <i class={`${isActive?"fa-solid":"fa-regular"} fa-circle`}></i>
  <NavLink
    end
    to="/"
    className={({ isActive }) =>
      isActive ? "selected" : ""
    }
  >
    Home
  </NavLink>
</div>

但报错提示isActive未定义，如何在NavLink外部使用其isActive值？

方法1：使用useMatch钩子 #

React Router的useMatch钩子可直接匹配指定路由，返回匹配状态。在组件内调用该钩子获取激活状态，即可在图标和NavLink中复用：

import { NavLink, useMatch } from 'react-router-dom';

// 组件内部获取匹配状态
const homeMatch = useMatch({ path: "/", end: true });
const profileMatch = useMatch({ path: "/profile", end: true });

// 渲染部分
<div className="sidebar__link">
  <i className={`${homeMatch ? "fa-solid" : "fa-regular"} fa-circle`}></i>
  <NavLink
    end
    to="/"
    className={homeMatch ? "selected" : ""}
  >
    Home
  </NavLink>
</div>
<div className="sidebar__link">
  <i className={`${profileMatch ? "fa-solid" : "fa-regular"} fa-circle`}></i>
  <NavLink
    end
    to="/profile"
    className={profileMatch ? "selected" : ""}
  >
    User Profile
  </NavLink>
</div>

注意：useMatch的参数需与NavLink的to和end属性保持一致，确保匹配规则相同。

方法2：利用NavLink的子元素函数 #

NavLink的children支持传入函数，函数会接收包含isActive的参数。将图标和文本放入NavLink内部，即可直接使用该状态：

<div className="sidebar__link">
  <NavLink
    end
    to="/"
    className={({ isActive }) => isActive ? "selected" : ""}
  >
    {({ isActive }) => (
      <>
        <i className={`${isActive ? "fa-solid" : "fa-regular"} fa-circle`}></i>
        <span>Home</span>
      </>
    )}
  </NavLink>
</div>
<div className="sidebar__link">
  <NavLink
    end
    to="/profile"
    className={({ isActive }) => isActive ? "selected" : ""}
  >
    {({ isActive }) => (
      <>
        <i className={`${isActive ? "fa-solid" : "fa-regular"} fa-circle`}></i>
        <span>User Profile</span>
      </>
    )}
  </NavLink>
</div>

方法3：封装独立组件 #

若存在多个重复侧边栏链接，可封装成组件统一处理isActive逻辑，提升复用性：

import { NavLink } from 'react-router-dom';

const SidebarLink = ({ to, label }) => (
  <div className="sidebar__link">
    <NavLink
      end
      to={to}
      className={({ isActive }) => isActive ? "selected" : ""}
    >
      {({ isActive }) => (
        <>
          <i className={`${isActive ? "fa-solid" : "fa-regular"} fa-circle`}></i>
          <span>{label}</span>
        </>
      )}
    </NavLink>
  </div>
);

// 调用组件
<SidebarLink to="/" label="Home" />
<SidebarLink to="/profile" label="User Profile" />

内容的提问来源于stack exchange，提问作者coderNoob