NavLink NavLink 导航高亮
最后更新：2026-10-28
NavLink NavLink 导航高亮
NavLink 是带「激活态」的 Link：当前地址匹配其 to 时，自动给渲染出的 a 标签加 active 类名（或调用 className 函数）。导航栏、侧边栏用它实现当前页高亮，比手写 useLocation 判断简洁得多。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 组件 |
| 引入版本 | React Router 6.4 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { NavLink } from 'react-router-dom'
<NavLink
to="/about"
className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'
}>关于</NavLink>
// 简写：默认匹配时加 class="active"
<NavLink to="/about">关于</NavLink>⚙️ 参数
| to | 目标路径，如 /users/42；也支持相对路径与对象形式 { pathname, search }。 |
|---|---|
| className | 可以是字符串，也可以是 ({ isActive }) => string 函数，按激活态返回类名。 |
返回值：无（组件）。渲染一个 a 标签，当前地址匹配 to 时携带激活样式。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点击任一项，该项变蓝底加粗并显示 ✓——对应真实 NavLink 的 isActive → className 函数效果（模拟演示）。💡 要点
💡 提示 end 属性控制「精确匹配」：/users 加 end 后，/users/42 不再高亮；不加时按前缀匹配。
ℹ️ 说明 v6 的 className 与 children 都支持函数签名 ({ isActive, isPending }) => …，v7 还增加 isTransitioning。
⚠️ 注意 NavLink 渲染真实 a 标签，不要在 onClick 里阻止默认行为再手动跳转，把导航交给 Router 接管。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q NavLink 和 Link 有什么区别？
A 功能相同（都是无刷新跳转的 a 标签），区别仅在 NavLink 暴露激活态 isActive，适合导航栏；普通跳转用 Link。
Q 怎么让 /users 只在完全相等时高亮？
A 加 end 属性：<NavLink to="/users" end>，关闭默认的前缀匹配。
Q 激活时能改文字而不只是改类名吗？
A 可以，children 也支持函数：({ isActive }) => isActive ? '当前：关于' : '关于'。
