React Router 的 Link 和 a 标签的区别

问题

React Router 中的 <Link> 组件和普通的 <a> 标签有什么区别？

解答

<Link> 是 React Router 提供的路由跳转组件，它的核心作用是实现单页面应用（SPA）的路由切换，而不会刷新整个页面。

Link 的工作原理

当点击 <Link> 时，会执行以下操作：

1. 如果设置了 onClick 事件，先执行该事件
2. 阻止 <a> 标签的默认跳转行为（event.preventDefault()）
3. 使用 History API（如 pushState）更新浏览器 URL
4. 触发 React Router 匹配新路由，只更新对应的组件内容

// Link 组件使用示例
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/home">首页</Link>
      <Link to="/about">关于</Link>
    </nav>
  );
}

a 标签的行为

普通 <a> 标签会触发浏览器的默认跳转行为，导致：

• 页面完全刷新
• 重新加载所有资源（JS、CSS 等）
• React 应用重新初始化
• 丢失当前的应用状态

// 普通 a 标签
<a href="/home">首页</a>  // 会刷新整个页面

关键点

• <Link> 通过拦截点击事件和阻止默认行为，实现无刷新跳转
• <Link> 使用 History API 更新 URL，只重新渲染匹配的路由组件
• <a> 标签会触发完整的页面刷新，导致应用状态丢失
• 在 React Router 应用中应始终使用 <Link> 而非 <a> 进行内部导航