＜Link＞＜Link＞ 和 ＜a＞ ＜/a＞标签的区别

1. Link (React Router)：

• 作用: Link 是 react-router-dom 提供的组件，用于在 React 应用中创建前端路由跳转。它不会导致页面重新加载。
• 优点:
  • 无刷新跳转: 使用 Link 进行导航时，React 的路由器会捕获并处理链接，避免浏览器的全页面刷新。
  • 性能: 不重新加载页面，因此可以保留应用的状态，性能更好。
  • 路由集成: 与 React Router 的路由机制深度集成，支持声明式路由管理。

• <li><Link to={`/contacts/1`}>Your Name</Link>
  </li>
  

2. a (HTML Anchor)：

• 作用: a 标签是 HTML 的标准超链接标签，点击后会直接跳转到目标地址，并重新加载页面。
• 缺点:
  • 刷新页面: 使用 a 标签时，浏览器会重新加载目标页面，从而丢失当前应用的状态。
  • 不适合单页应用: 在 React 的单页应用中使用 a 标签，会绕过 React Router 的路由系统，导致页面刷新的不必要开销。

<li><a href={`/contacts/1`}>Your Name</a>
</li>

 

总结:

• 使用 Link: 当在 React 应用中进行路由导航时，应该使用 Link，以确保路由系统能够捕获到跳转并防止页面刷新。
• 使用 a: 适合用于外部链接或当你确实需要页面刷新时，但在 React 应用的内部导航中应尽量避免。