NavLink vs. Link

好 👌，这个问题在 React Router v6 里特别常见。

1. 共同点

• Link 和 NavLink 都是 React Router 提供的导航组件。

• 作用类似于 HTML 的 <a href="...">，但不会整页刷新，而是执行单页应用 (SPA) 的路由切换。

• 都通过 to 指定跳转地址：

  jsx

  <Link to="/about">About</Link>
  <NavLink to="/about">About</NavLink>

2. 不同点

🔹 Link

• 只是一个普通的路由跳转。
• 用于单纯的导航，不会关心当前路由是否匹配。

例子：

<Link to="/home">Home</Link>

🔹 NavLink

• 是 Link 的增强版，用于 导航菜单。
• 它可以检测当前路由是否与 to 匹配，然后自动添加 状态样式。
• 常见场景：高亮显示当前选中的菜单项。

例子：

<NavLink to="/home" className={({ isActive }) => (isActive ? 'active' : 'inactive')}>
  Home
</NavLink>

这里的 isActive 是 React Router 传入的参数：

• 当前路径匹配 /home → isActive = true，className = "active"
• 不匹配 → "inactive"

3. 总结对比表

✅ 一句话总结

• 用 Link：只是跳转。
• 用 NavLink：还能知道自己是不是“当前页面”，常用于导航栏高亮