1.3 Link 组件的细节深入

你可能已经注意到了，INLINECODEd5d34dd4 组件渲染出的本质是一个带有 href 属性的 INLINECODE116cd04b 标签。我们可以像给普通 HTML 元素添加样式一样，通过 INLINECODE50d6c7c3 或 INLINECODEefa11e23 属性来美化它。但要注意，INLINECODEee67d0e3 本身并不具备感知“当前路由”的能力，这意味着它不会自动告诉你用户现在正停留在哪个页面上。如果你试图仅靠 CSS 来实现当前页面的高亮，就需要引入更复杂的逻辑判断，这正是 INLINECODEd510a1f5 登场的时刻。

2. NavLink 组件：感知状态的智能导航

INLINECODE14d1134b 是 INLINECODEc9204069 的一个特殊版本。它在所有 INLINECODE7e59e8a3 功能的基础上，增加了一个关键特性：当 URL 与 INLINECODEa27c91df 属性匹配时，它可以感知并自动添加样式属性。这使得它成为构建导航栏、面包屑导航或选项卡菜单的最佳选择。

2.1 核心功能： activeClassName 与 activeStyle

在早期的 React Router 版本（v5）中，我们习惯使用 INLINECODE3760ed36（当链接激活时应用的类名）和 INLINECODEceda7daf（当链接激活时应用的内联样式）。在 React Router v6 中，虽然推荐使用函数式写法，但理解这些基础概念依然重要。

适用场景：

• 网站主导航栏，需要高亮显示当前页面。
• 侧边栏菜单，用户需要清楚知道自己在哪个模块。
• 任何需要视觉反馈来指示当前状态的导航结构。

2.2 基础语法与示例 (React Router v6 写法)

在现代开发中，我们更倾向于使用函数子组件或简写属性来控制样式。让我们看一个更实用的例子。

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

function NavigationMenu() {
  // 定义一个函数来根据激活状态返回类名
  const getLinkClass = ({ isActive }) => 
    isActive ? ‘nav-link nav-link-active‘ : ‘nav-link‘;

  return (
    
  );
}

export default NavigationMenu;

在配合 CSS 使用时（例如让 INLINECODE709c39e3 显示为蓝色加粗），用户界面会立刻变得生动起来。我们不再需要手动去写 INLINECODE2c865be2 判断，一切交由 NavLink 处理。

3. Link 与 NavLink 的核心区别对照

为了让我们更直观地理解，我们将这两个组件放在一起进行对比。

Link 组件

:—

提供应用内的导航跳转，防止页面刷新。

无。它不知道当前的路由是什么。

标准的 HTML 样式处理方式。

极低，因为它只是渲染了一个锚点。

通用的链接，如页脚链接、跳转按钮。

4. 创建全栈演示应用：从零到部署

光说不练假把式。为了加深理解，让我们一起来构建一个完整的 React 应用，我们将同时使用这两个组件，让你在实践中感受它们的区别。

第 1 步：项目初始化

首先，我们需要搭建一个全新的 React 项目。打开终端，运行以下命令：

# 使用 npx 创建应用，这会自动配置好基础环境
npx create-react-app router-demo

# 进入项目目录
cd router-demo

第 2 步：安装 React Router

React Router 并不在 React 的核心库中，我们需要单独安装 react-router-dom 这个包。

# 使用 npm 安装依赖
npm install react-router-dom

第 3 步：配置项目结构

为了保证代码的整洁，我们在 INLINECODE07f0cd7b 目录下创建一个 INLINECODEf9d6d5c8 文件夹。我们的文件结构如下所示：

src/
├── components/
│   ├── Navbar.js      (存放 NavLink)
│   ├── Home.js
│   ├── About.js
│   └── Contact.js
├── App.js             (配置路由)
├── App.css            (全局样式)
└── index.js           (入口文件)

第 4 步：编写业务逻辑与样式

首先，让我们编写全局样式 App.css，为导航栏提供美观的视觉效果。

/* src/App.css */

body {
  font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

/* 导航栏容器样式 */
.navbar {
  background-color: #282c34;
  padding: 1rem 2rem;
  display: flex;
  gap: 20px;
}

/* 基础链接样式 */
.nav-link {
  color: #b0b0b0; /* 默认灰色 */
  text-decoration: none;
  font-size: 1.1rem;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 鼠标悬停样式 */
.nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 
关键样式：NavLink 激活时的状态 
当 isActive 为 true 时，此类会被应用
*/
.nav-link-active {
  color: #61dafb; /* 亮蓝色 */
  background-color: rgba(97, 218, 251, 0.1);
  font-weight: bold;
  border-bottom: 2px solid #61dafb;
}

.content-area {
  padding: 2rem;
  text-align: center;
}

接下来，我们创建 Navbar 组件。这里我们将展示 INLINECODE187074ae 的威力，并在最后放一个普通的 INLINECODEe7f4fb79 作为对比。

// src/components/Navbar.js
import React from ‘react‘;
import { NavLink, Link } from ‘react-router-dom‘;

function Navbar() {
  // 定义一个函数来动态处理类名
  // 这是一个非常实用的技巧，让我们保持代码整洁
  const getActiveClass = ({ isActive }) => {
    return isActive ? ‘nav-link nav-link-active‘ : ‘nav-link‘;
  };

  return (
    
  );
}

export default Navbar;

最后，我们在 App.js 中配置路由，将一切串联起来。