React Router Dom 6.24.1中<Link>与<a>标签的使用场景及最佳实践

核心区分原则 #

仅用于应用内部路由导航，原生标签用于外部链接，这是React Router使用的核心准则，具体原因和场景如下：

为什么用做内部导航 #

react-router-dom提供的<Link>组件是专门为单页应用(SPA)设计的：

• 它会拦截浏览器的默认页面跳转行为，通过JavaScript实现客户端路由切换，不会重新加载整个页面，能保留应用的状态（比如组件的状态、全局上下文），大幅提升用户体验。
• 你的Menu.jsx示例中，跳转/、/create、/about这些内部路由，使用<Link>是完全正确的做法。

为什么用做外部链接 #

当需要跳转到当前应用域名以外的外部网站时，必须使用原生<a>标签：

• <Link>的设计目标是处理内部路由，虽然传入外部URL也能跳转，但不符合语义化规范，且无法充分利用原生<a>的浏览器默认行为（比如SEO的链接识别、右键菜单的原生交互等）。
• 你的Footer.jsx示例中，跳转Google的正确写法是使用<a>标签：

  <a href='https://www.google.com/' target="_blank" rel="noopener noreferrer">Google</a>
  

  其中rel="noopener noreferrer"是添加到target="_blank"链接的安全最佳实践，防止新打开的页面获取原页面的控制权。

补充：页面内锚点跳转 #

如果是跳转到当前页面内的锚点（比如#section1）：

• 若希望触发React Router的路由监听（比如配合scrollRestoration等功能），可以用<Link to="/current-path#section1" />
• 若只是简单的页面内滚动，直接用原生<a href="#section1" />即可，更轻量。

总结最佳实践 #

• 内部路由跳转（同一应用内的路径，如/home、/user/123）：使用react-router-dom的<Link>组件
• 外部网站跳转（如https://example.com）：使用原生<a>标签，设置正确的href，必要时添加target="_blank"和rel="noopener noreferrer"
• 页面内锚点跳转：根据是否需要路由监听选择对应的方式

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