相同点
从最终渲染的 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>