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

最新推荐文章于 2023-12-12 14:49:33 发布

小小的糖人

最新推荐文章于 2023-12-12 14:49:33 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.csdn.net/zzyaiaad/article/details/105663345

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

if (!event.defaultPrevented && // onClick prevented default
    event

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小的糖人

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2023年前端面试汇总-React

越陌度阡

06-29

821

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

React Router中link标签和a标签的区别

cx18333的博客

06-09

845

在 React Router 中，`` 组件是用来处理路由导航的，它会生成一个可以点击的链接，并根据配置的路由规则更新应用程序的 URL。而 `` 标签是 HTML 中的原生链接元素，通过 href 属性指定链接的目标 URL，点击时会直接跳转到该 URL。

参与评论您还未登录，请先登录后发表或查看评论

react或vue点击按钮实现图片/文件下载（a链接）

最新发布

weixin_45960031的博客

12-12

609

react或vue点击按钮实现图片/文件下载（a链接）

React路由跳转Link的使用

H_Stary的博客

07-07

4642

Link标签的三种参数传递方式

react 路由Link配置

weixin_43294560的博客

02-25

9904

1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname、search、hash拼接在url路径上,state为传入的参数可通过输出props查看对象内的信息 2、Link的replace属性添加replac...

react-router-dom

weixin_30496431的博客

09-23

482

进入项目目录，使用npm安装react-router-dom npm install react-router-dom --save-dev 然后我们新建俩个页面，分别命名为“home”和“detail”。在页面中编写如下代码: // home.js import React from 'react'; export default class Home ex...

React函数组件路由和组件

starry__sty的博客

07-30

2905

函数组件路由和组件路由SPASPA的切换机制前端路由React Router安装组件BrowserRouter 组件HashRouter 组件Route 组件exactLink组件to属性作用使用:传递propsNavLink组件activeStyleactiveClassNameisActivewithRouter 组件(高阶组件，高阶函数，高阶路由)Switch 组件Redirect 组件hooks (*Router5.0之后出现的*)路由参数history :历史记录以及路由给我们提供的一些操作loc

React路由-react-router-dom安装与使用(一)

此鱼非闲鱼也的博客

07-14

4601

路由当应用变得复杂的时候，就需要分块的进行处理和展示。传统方式的处理:把整个应用分成了多个页面，然后通过 URL 进行连接。传统方式的弊端: 每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；会导致整个 JavaScript 重新执行，丢失状态。单页面应用单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。 **单页面应用优缺点**如下：

React尚硅谷张天禹笔记（更新中......）

weixin_52617854的博客

06-05

3192

React笔记

react 路由详细讲解(1)

s_y_f_的博客

07-30

798

介绍: 今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦 SPA的理解单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解 ① 什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component ② 路

react-router 里的 Link 标签和 a 标签有什么区别？

zhangwenok的博客

10-08

2429

Link> 是 react-router 里实现路由跳转的链接，一般配合使用，react-router 会接管Link 的默认链接跳转行为，区别于传统的页面跳转，的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。而标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）。从最终渲染的 DOM 来看，这两者都是链接，都是标签。跳转链接的路径，如 /users/123。

react路由组件传参

long321041080的博客

08-07

489

react学习--路由组件传参

a链接下载文件名乱码

weixin_39535289的博客

07-04

2903

react项目中，用a链接下载后文件名不能正常显示

无废话快速上手React路由

bsefef的博客

03-10

158

本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发安装输入以下命令进行安装： // npm npm install react-router-dom // yarn yarn add react-router-dom react-router相关标签 react-router常用的组件有以下八个： import { BrowserRouter, HashRouter, Route, Redirect, Switch, Link, N

a标签与link标签的区别

weixin_51338296的博客

04-15

2643

a标签和link的区别

qq_36262295的博客

09-03

1319

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

【react-router】从Link组件和a标签的区别说起，react-router如何实现导航并优化DOM性能？