ReactRouter7.5: NavLink 和 Link 的区别是什么？

在 React Router 中，<Link /> 和 <NavLink /> 都是用来在页面之间跳转的，但它们有本质区别在于"样式状态处理" 。

---

✅ 简要区别

特性	<Link>	<NavLink>
路由跳转功能	✅ 支持	✅ 支持
自动添加 active	❌ 没有	✅ 根据当前路径自动添加 active class
用于导航菜单	👎 不推荐	👍 推荐
可设置 activeClassName / style	❌ 无法设置	✅ 可设置 className 或 style 为函数

---

🔎 举个例子

🔹 Link 使用方式：

import { Link } from "react-router-dom";

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

• ✔️ 跳转功能正常
• ❌ 无法判断当前页面是否在 /about

---

🔹 NavLink 使用方式：

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

<NavLink
  to="/about"
  className={({ isActive }) => (isActive ? "active" : "")}
>
  About
</NavLink>

• ✔️ 会在当前路径是 /about 时，自动添加 "active" class
• 可以根据 isActive 设置样式、图标、颜色等

---

🧠 小结：什么时候用哪个？

场景	使用推荐
纯跳转、不需要状态样式	✅ <Link>
导航栏、高亮当前页面、激活状态	✅ <NavLink>

---

✨ 小技巧：自定义激活样式

<NavLink
  to="/dashboard"
  style={({ isActive }) => ({
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "#007bff" : "#000",
  })}
>
  Dashboard
</NavLink>

或者 class：

<NavLink
  to="/home"
  className={({ isActive }) =>
    isActive ? "nav-link active" : "nav-link"
  }
/>

---

详细介绍两者区别

<NavLink /> 和 <Link /> 是 React Router 提供的两个组件，它们都用于在 React 应用中实现页面跳转，但它们有一些重要的区别。理解这些区别，有助于你更好地控制应用中的路由导航，尤其是在处理导航菜单、动态样式或状态时。

1. 基本区别：导航和样式管理

<Link />：

<Link /> 是 React Router 提供的基础跳转组件，它用于在不同页面间导航。它通过 to 属性指定目标路径，通常在应用中的普通跳转场景下使用。

<NavLink />：

<NavLink /> 是 Link 的一个扩展，它提供了与 <Link /> 相同的功能，但增加了根据当前活动路由自动添加样式 的功能。<NavLink /> 在实际开发中，尤其在导航菜单中非常有用，因为它能根据当前页面路径动态地为链接添加 active 类，便于你高亮显示当前选中的链接。

2. Link 示例

<Link /> 主要用于普通的页面导航，不涉及页面状态的高亮显示。你可以像下面这样使用：

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

在上面的例子中，我们使用了 <Link /> 来创建一个简单的导航菜单，每个 <Link /> 都指向不同的路径。当你点击这些链接时，浏览器的 URL 会变化，但不会刷新页面，因为 React Router 会拦截这些链接的默认行为，并通过 JavaScript 实现客户端导航。

3. NavLink 示例

<NavLink /> 提供了与 <Link /> 相同的功能，但它额外支持动态激活样式 。它允许你指定在当前路径匹配时，链接会自动添加一个 active 类，以便你可以根据这个类来修改链接的样式，突出显示当前页面。

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" activeClassName="active-link">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="active-link">About</NavLink>
        </li>
        <li>
          <NavLink to="/contact" activeClassName="active-link">Contact</NavLink>
        </li>
      </ul>
    </nav>
  );
}

在这个例子中，当用户访问 /about 页面时，<NavLink /> 会自动给 "About" 链接添加 active-link 类。你可以在 CSS 中定义该类的样式，以便高亮显示当前选中的导航链接：

.active-link {
  color: red;
  font-weight: bold;
}

自动激活

<NavLink /> 会根据当前的 URL 与 to 属性值进行匹配，自动为匹配的链接添加 active 类。例如：

• 当访问 /about 时，<NavLink /> 的 to="/about" 会被匹配，自动应用 activeClassName="active-link"。
• 你可以通过设置 activeStyle 来替代 activeClassName，直接在 JavaScript 中为链接应用内联样式：

<NavLink to="/about" activeStyle={{ color: 'red', fontWeight: 'bold' }}>
  About
</NavLink>

这样，当用户在 /about 页面时，<NavLink /> 会自动将链接样式更改为红色并加粗。

4. NavLink 高级用法：动态样式和条件渲染

除了基本的 activeClassName 和 activeStyle，<NavLink /> 还支持更复杂的匹配条件。比如你可以通过 isActive 函数来根据当前路径动态地添加样式或类：

<NavLink
  to="/about"
  className={({ isActive }) => (isActive ? "active-link" : "")}
>
  About
</NavLink>

在这个例子中，isActive 是一个布尔值，表示当前路径是否与 to 属性的路径匹配。如果路径匹配，则 className 会应用 active-link 类。

5. Link 与 NavLink 的区别总结

特性	<Link />	<NavLink />
基本功能	用于导航，改变浏览器的 URL	用于导航，具有自动添加激活样式的能力
激活状态	没有激活状态	自动根据当前路由状态为链接添加 active 类
可配置样式	无	支持 activeClassName 和 activeStyle（或 isActive 函数）
常用场景	一般页面跳转，路由链接	导航菜单，侧边栏，标识当前选中项

6. 何时使用 <Link /> 或 <NavLink />

场景	使用组件
普通页面导航，或没有需要高亮的链接	<Link />
导航菜单或需要高亮显示当前路径的链接	<NavLink />

例如：

• 如果你在做一个网站的导航菜单 ，需要根据当前页面显示高亮链接，你应该使用 <NavLink />。
• 如果只是简单的页面跳转或列表中的普通链接，<Link /> 就足够了。

7. 总结

<Link /> 和 <NavLink /> 都是 React Router 提供的用于实现导航的组件，但它们各有不同的使用场景。<Link /> 用于普通的页面跳转，而 <NavLink /> 则扩展了 Link 的功能，允许你根据当前页面的路径动态地为链接添加样式，通常用于导航菜单等需要高亮显示当前选中项的地方。

选择哪个组件取决于你是否需要高亮当前页面，还是仅仅需要执行简单的页面跳转。