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 应用的内部导航中应尽量避免。