<a>、<button>与react-router-dom中<Link>的区别及最佳实践

你在基于CRA开发React应用时，尝试了三种路由跳转方式：

<a href='/questions/aks'> Routing to Ask Question Page </a>

<Link to='/questions/aks'> Routing to Ask Question Page </Link>

const handleButtonClick = () => {
  navigate('/questions/aks')
}
<button onClick={handleButtonClick}> Routing to Ask Question Page </button>

下面逐一拆解三者的核心差异：

1. 原生<a>标签 #

• 功能本质：这是HTML原生的跳转方式，点击后会触发浏览器的整页刷新，重新请求服务器获取新页面资源，包括HTML、CSS、JS等。
• 适配问题：完全脱离React Router的路由控制，会破坏单页应用(SPA)的无刷新体验，同时会重置React应用的状态、组件实例。
• 适用场景：仅用于跳转到非SPA的外部页面，比如其他域名的网站，绝对不要用在SPA内部路由跳转。

2. React Router <Link>组件 #

• 功能本质：React Router提供的专门用于SPA内部路由跳转的组件，点击时会通过React Router的路由系统拦截原生<a>的默认跳转行为，只更新浏览器URL和渲染对应路由组件，不会触发整页刷新。
• 额外特性：支持to属性的多种写法（字符串路径、对象形式），自带激活状态样式（可通过className/style配合isActive控制），还能传递state参数（比如to={{ pathname: '/questions/aks', state: { id: 123 } }}），目标页面可通过useLocation获取。
• 适用场景：SPA内部绝大多数的普通跳转场景，比如导航栏、页面内的跳转链接，是React路由跳转的首选方案。

3. navigate编程式导航 #

• 功能本质：通过React Router的useNavigate钩子获取的navigate函数，属于编程式路由控制，可以在任意事件处理逻辑（比如按钮点击、表单提交成功后、异步操作完成后）中触发跳转。
• 额外特性：支持更灵活的路由操作，比如前进/后退（navigate(-1)后退一页）、替换历史记录（navigate('/questions/aks', { replace: true })，不会留下当前页面的历史记录），同样可以传递state参数。
• 适用场景：需要在逻辑判断后触发跳转的场景，比如表单验证通过后跳转、接口请求成功后跳转，或者非链接元素（如按钮、卡片）的跳转需求。

最佳实践总结 #

• 优先用<Link>组件处理SPA内部的普通跳转需求，保证无刷新体验和路由系统的统一控制。
• 绝对避免用原生<a>标签做SPA内部跳转，除非是跳转到外部网站。
• 用navigate函数处理需要逻辑驱动的跳转场景，比如表单提交、异步操作后的跳转，或者非链接类元素的跳转。

内容的提问来源于stack exchange，提问作者Tak