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

相同点


从最终渲染的 DOM 来看,这两者都是链接,都是 <a> 标签。

区别


        <Link> 是 react-router 里实现路由跳转的链接,一般配合 <Route> 使用,react-router 会接管Link 的默认链接跳转行为,区别于传统的页面跳转,<Link> 的“跳转”行为只会触发相匹配的 <Route> 对应的页面内容更新,而不会刷新整个页面。
而 <a> 标签就是普通的超链接了,用于从当前页面跳转到 href 指向的另一个页面(非锚点情况)。

        对比<a>,Link组件避免了不必要的重渲染,react-router只更新变化的部分从而减少DOM性能消耗,react的创新之处在于,它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新",react-router很好地继承了这一点

Link做了3件事情:

1、如果Link上定义了onClick方法,则执行该onclick方法
2、click的时候阻止a标签默认事件(这样子点击<a href="/abc">123</a>就不会跳转和刷新页面)
3、再取得跳转href(即是to),用history(前端路由两种方式之一,history & hash)跳转,此时只是链接变了,并没有刷新页面

使用Link标签

属性描述


to
跳转链接的路径,如 /users/123。

query
已经转化成字符串的键值对的对象。

hash
URL 的 hash 值,如 #a-hash。

注意:React Router 目前还不能管理滚动条的位置,并且不会自动滚动到 hash 对应的元素上。如果需要管理滚动条位置,可以使用 scroll-behavior 这个库。

state
保存在 location 中的 state。

activeClassName
当某个 route 是激活状态时,<Link> 可以接收传入的 className。失活状态下是默认的 class。

activeStyle
当某个 route 是激活状态时,可以将样式添加到链接元素上。

onClick(e)
自定义点击事件的处理方法。如处理 <a> 标签一样 - 调用 e.preventDefault() 来防止过度的点击,同时 e.stopPropagation() 可以阻止冒泡的事件。

其他
你也可以在标签上传入一些你想要的 props,如 title,id,className 等等。


示例

<Link to={`/users/${user.id}`} activeClassName="active">{user.name}</Link>
// 变成它们其中一个依赖在 History 上,当这个 route 是
// 激活状态的
<a href="/users/123" class="active">Michael</a>
<a href="#/users/123">Michael</a>

// 修改 activeClassName
<Link to={`/users/${user.id}`} activeClassName="current">{user.name}</Link>

// 当链接激活时,修改它的样式
<Link to="/users" style={
   
   {color: 'white'}} activeStyle={
   
   {color: 'red'}}>Users</Link>


// 字符串定位描述符 String location descriptor.
<Link to="/hello">
 Hello
</Link>

// 对象定位描述符 Object location descriptor.
<Link to={
   
   { pathname: '/hello', query: { name: 'abc' } }}>
 Hello
</Link>

// 函数返回定位描述符Function returning location descriptor.
<Link to={location => ({ ...location, query: { name: 'abc' } })}>
 Hello
</Link>


 

猜你喜欢

转载自blog.csdn.net/zhangwenok/article/details/127207814