React Router 中 Link 与 NavLink 的区别

React Router 概述

在 React 应用开发中，路由是一个至关重要的概念。它允许我们根据不同的 URL 地址来渲染不同的组件，从而实现单页应用（SPA）的多视图功能。React Router 是一个广泛使用的路由库，为 React 应用提供了强大的路由功能。它使得在 React 应用中管理页面导航变得更加容易和直观。

React Router 提供了多种组件来帮助我们实现路由功能，其中 Link 和 NavLink 是两个常用的用于创建导航链接的组件。虽然它们看起来相似，都用于在应用中创建链接以实现页面导航，但实际上它们之间存在一些重要的区别，这些区别在不同的应用场景下有着不同的用途。接下来我们将深入探讨 Link 与 NavLink 的区别。

Link 组件

Link 组件的基本功能

Link 组件是 React Router 中最基础的用于创建导航链接的组件。它的主要作用是在应用中创建一个可点击的链接，当用户点击该链接时，应用会导航到指定的 URL 路径，同时 React Router 会根据这个路径来渲染对应的组件。

下面是一个简单的 Link 组件的使用示例：

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

function App() {
  return (
    <div>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

export default App;

在上述代码中，我们通过 Link 组件创建了两个链接，分别指向 /home 和 /about 路径。当用户点击这些链接时，React Router 会根据配置将应用导航到对应的页面。

Link 组件的属性

to：这是 Link 组件最重要的属性，用于指定链接要导航到的目标路径。它可以是一个字符串形式的路径，如 /home，也可以是一个包含更多导航信息的对象。例如：

<Link to={{
  pathname: '/home',
  search: '?sort=latest',
  hash: '#top',
  state: { fromDashboard: true }
}}>Home</Link>

在这个对象形式的 to 属性中，pathname 是目标路径，search 是查询字符串，hash 是 URL 中的哈希部分，state 则可以在导航过程中传递一些状态信息。

replace：该属性是一个布尔值。当设置为 true 时，使用 replace 方式导航，这意味着导航时不会在浏览器的历史记录中添加新的记录，而是替换当前的历史记录。例如：

<Link to="/new-page" replace>Go to New Page</Link>

这样，当用户点击这个链接后，再点击浏览器的后退按钮，不会回到当前页面，而是会退回到上一个页面之前的页面。

innerRef：此属性用于获取底层 DOM 元素的引用。通过传递一个回调函数，该回调函数会在组件挂载时收到 DOM 元素作为参数，我们可以利用这个引用对 DOM 元素进行一些操作。例如：

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

function App() {
  const handleRef = (el) => {
    if (el) {
      console.log('Link DOM element:', el);
    }
  };

  return (
    <div>
      <Link to="/home" innerRef={handleRef}>Home</Link>
    </div>
  );
}

export default App;

Link 组件的应用场景

简单导航：在大多数简单的导航场景中，Link 组件就完全能够满足需求。比如在一个小型的单页应用中，页面之间的导航较为直接，只需要基本的路径跳转功能，使用 Link 就可以轻松实现。例如一个简单的博客应用，在首页通过 Link 组件创建链接到文章详情页。
编程式导航辅助：结合 React Router 的编程式导航 API（如 history 对象），Link 组件可以在一些复杂的业务逻辑中辅助实现导航。比如在某个表单提交成功后，需要导航到另一个页面，我们可以在提交函数中通过 history.push 进行编程式导航，同时在页面上也可以保留使用 Link 组件创建的常规导航链接。

NavLink 组件

NavLink 组件的基本功能

NavLink 组件本质上是 Link 组件的一个增强版本。它除了具备 Link 组件的基本导航功能外，还增加了一些用于导航链接状态管理的功能，特别是用于处理当前激活链接的样式。

以下是一个简单的 NavLink 组件使用示例：

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

function App() {
  return (
    <div>
      <NavLink to="/home" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </div>
  );
}

export default App;

在这个例子中，我们使用 NavLink 组件创建了两个导航链接。当用户访问 /home 路径时，指向 /home 的 NavLink 组件会自动添加 activeClassName 指定的 active 类名，我们可以通过 CSS 来为这个 active 类设置特殊样式，以表示当前处于激活状态的导航链接。

NavLink 组件的属性

activeClassName：这是 NavLink 组件特有的一个重要属性，用于指定当链接处于激活状态时要添加到链接元素上的类名。例如在上面的代码中，当链接对应的路径与当前 URL 匹配时，会添加 active 类名。我们可以在 CSS 中这样定义样式：

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

这样，激活状态的导航链接文本会显示为红色且加粗。

activeStyle：除了通过类名来设置激活状态样式外，NavLink 组件还提供了 activeStyle 属性，允许我们直接以对象的形式设置激活状态的样式。例如：

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

这种方式更加直接，不需要额外在 CSS 文件中定义类名。不过，对于复杂的样式，使用 activeClassName 结合 CSS 文件会更加易于维护。

exact：该属性是一个布尔值，用于精确匹配路径。当设置为 true 时，只有当当前 URL 与 NavLink 的 to 属性指定的路径完全匹配时，才会认为该链接处于激活状态。例如，有如下两个 NavLink：

<NavLink to="/home" exact activeClassName="active">Home</NavLink>
<NavLink to="/home/profile" activeClassName="active">Profile</NavLink>

如果当前 URL 是 /home，只有第一个 NavLink 会处于激活状态，因为 exact 属性确保了精确匹配。如果没有 exact 属性，当 URL 为 /home 或 /home/profile 时，第一个 NavLink 都会被认为是激活状态。

isActive：这是一个函数属性，用于自定义激活状态的判断逻辑。该函数接收两个参数：match 和 location。match 对象包含了当前路径与 NavLink 路径的匹配信息，location 对象表示当前的 URL 位置信息。通过这个函数，我们可以实现一些复杂的激活状态判断。例如：

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

function isMyActive(match, location) {
  if (!match) {
    return false;
  }
  // 自定义逻辑，例如根据 location.state 中的某个字段判断
  return location.state && location.state.special === true;
}

<NavLink to="/special-page" isActive={isMyActive}>Special Page</NavLink>

在这个例子中，只有当路径匹配且 location.state.special 为 true 时，该 NavLink 才会被认为是激活状态。

NavLink 组件的应用场景

导航菜单：在构建应用的导航菜单时，NavLink 组件是非常理想的选择。它可以清晰地标记出当前激活的菜单项，为用户提供明确的视觉反馈，告知用户当前所在的页面位置。比如在一个电商应用的顶部导航栏中，通过 NavLink 组件创建 “首页”、“商品列表”、“购物车” 等导航链接，并通过设置激活样式，让用户能够直观地知道自己当前所处的页面。
面包屑导航：面包屑导航用于显示用户在应用中的浏览路径，NavLink 组件同样可以在此场景中发挥作用。通过设置合适的激活样式，可以突出显示当前页面在面包屑路径中的位置，帮助用户更好地理解自己的位置以及页面之间的层级关系。

Link 与 NavLink 的区别对比

功能侧重

Link：Link 组件侧重于基本的导航功能，它仅仅负责创建一个可点击的链接，将用户导航到指定的路径。它不关心链接的激活状态，也没有提供直接设置激活样式的功能。它的设计理念是简单、纯粹地实现页面跳转，适用于那些不需要对当前链接状态进行特殊处理的场景。
NavLink：NavLink 组件在 Link 组件的基础上，更侧重于导航链接的状态管理，尤其是激活状态的处理。它通过提供 activeClassName、activeStyle 等属性，方便开发者为激活状态的链接设置独特的样式，以突出显示当前所在页面的导航项。这使得 NavLink 在构建导航菜单、面包屑导航等需要明确指示当前位置的场景中非常有用。

样式设置

Link：Link 组件本身没有直接设置激活样式的功能。如果要为 Link 组件添加激活样式，需要借助额外的状态管理机制，比如使用 React 的 useState 钩子或者 Redux 等状态管理库来跟踪当前路径，并根据路径状态为 Link 组件动态添加类名或样式。这增加了代码的复杂性，尤其在处理多个链接的激活样式时。例如：

import React, { useState } from'react';
import { Link } from'react-router-dom';

function App() {
  const [currentPath, setCurrentPath] = useState('/');
  const isActive = (path) => currentPath === path;

  return (
    <div>
      <Link to="/home" className={isActive('/home')? 'active' : ''}>Home</Link>
      <Link to="/about" className={isActive('/about')? 'active' : ''}>About</Link>
    </div>
  );
}

export default App;

NavLink：NavLink 组件则内置了激活样式设置的功能，通过 activeClassName 和 activeStyle 属性，我们可以轻松地为激活状态的链接设置样式。这种方式更加简洁直观，不需要额外的复杂状态管理逻辑。例如：

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

function App() {
  return (
    <div>
      <NavLink to="/home" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </div>
  );
}

export default App;

路径匹配逻辑

Link：Link 组件没有路径匹配相关的特殊属性，它只负责将用户导航到指定的路径。路径匹配的逻辑主要由 React Router 的路由配置来决定。
NavLink：NavLink 组件提供了 exact 属性用于精确路径匹配，以及 isActive 函数属性用于自定义路径匹配逻辑。这使得 NavLink 在路径匹配方面更加灵活，可以满足不同的业务需求。例如，在一个包含多级路径的应用中，通过 exact 属性可以确保只有在路径完全匹配时链接才处于激活状态，避免出现部分匹配导致的错误激活。

应用场景选择

Link：适用于简单的导航需求，如在页面内的某个区域创建一个跳转到其他页面的链接，且不需要对链接的激活状态进行特殊处理。例如在一篇文章中添加一个 “返回首页” 的链接，使用 Link 组件就足够了。另外，在一些与编程式导航结合的场景中，Link 组件也可以作为常规导航的补充。
NavLink：主要应用于需要突出显示当前激活导航项的场景，如导航菜单、面包屑导航等。在这些场景中，通过 NavLink 组件可以方便地为激活链接设置样式，提供更好的用户体验，帮助用户清晰地了解自己在应用中的位置。

实际开发中的注意事项

使用 Link 时的注意事项

路径参数传递：当使用 Link 组件传递路径参数时，要确保参数的格式和命名与路由配置中的定义一致。例如，在路由配置中有一个动态参数路径 /user/:id，在 Link 组件中传递参数时要按照正确的格式：

<Link to={`/user/${userId}`}>User Profile</Link>

这里 userId 是一个变量，要确保其值的正确性，否则可能导致路由无法正确匹配。

与编程式导航的配合：如果在应用中同时使用编程式导航（如 history.push）和 Link 组件，要注意两者之间的交互。例如，在某些情况下，编程式导航可能会改变页面状态，但 Link 组件的样式不会自动更新。这时可能需要手动处理状态同步，以确保用户界面的一致性。

使用 NavLink 时的注意事项

激活样式冲突：当使用 activeClassName 或 activeStyle 设置激活样式时，要注意避免样式冲突。特别是在一个复杂的应用中，可能存在多个 NavLink 组件，并且它们可能应用于不同的导航区域，每个区域可能有不同的样式需求。要确保不同区域的激活样式不会相互干扰。可以通过合理的 CSS 命名空间或者使用 CSS 模块来解决这个问题。
精确匹配与模糊匹配：在使用 exact 属性时，要根据实际需求准确设置。如果设置不当，可能会导致激活状态显示不正确。例如，在一个具有多级路径的导航菜单中，如果错误地对父级路径的 NavLink 使用了 exact 属性，可能会导致子级路径页面中父级导航链接无法正确激活。

总结

通过以上对 React Router 中 Link 与 NavLink 组件的详细分析，我们可以清楚地看到它们各自的特点和适用场景。Link 组件简单纯粹，专注于基本的导航功能，适用于简单导航场景；而 NavLink 组件在 Link 的基础上增强了导航链接的状态管理功能，尤其在处理激活状态样式方面具有很大优势，适用于构建导航菜单、面包屑导航等需要突出当前位置的场景。在实际开发中，我们应根据具体的业务需求和用户体验要求，合理选择使用 Link 或 NavLink 组件，以实现高效、友好的导航功能。同时，在使用过程中要注意各自的注意事项，确保应用的稳定性和用户体验的一致性。