react中link组件和传统a链接的区别

最新推荐文章于 2025-02-28 17:06:48 发布

小小的糖人

最新推荐文章于 2025-02-28 17:06:48 发布

阅读量2k

点赞数 1

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/zzyaiaad/article/details/105663345

版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了React中Link组件与传统a标签在路由处理上的差异。Link组件通过内部处理点击事件，防止a标签的默认行为，如页面刷新。它会阻止a标签的默认跳转，而是使用history API来改变URL，实现页面无刷新切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react路由的实现的a标签跟原生的a标签有什么区别

区别就是：link对这个a标签进行特殊的处理，绑定了自己的点击跳转视图的函数

先看Link点击事件handleClick部分源码

if (_this.props.onClick) _this.props.onClick(event);

if (!event.defaultPrevented && // onClick prevented default
    event.button === 0 && // ignore everything but left clicks
    !_this.props.target && // let browser handle "target=_blank" etc.
    !isModifiedEvent(event) // ignore clicks with modifier keys
) {
    event.preventDefault();

    var history = _this.context.router.history;
    var _this$props = _this.props,
        replace = _this$props.replace,
        to = _this$props.to;


    if (replace) {
        history.replace(to);
    } else {
        history.push(to);
    }
}