<Link> 是用于在我们的应用中进行导航的主要方式,它可以通过传递适当的属性,用来创建链接到特定路由的 标签。 例如有这样一个路由:

  1. <Route path="/posts/:postID" component={Post} />

就可以使用如下的组件链接到该路由上:

  1. <Link to={`/posts/${post.id}`} />

也可以直接在链接上传递一个 location 对象以便 query 参数:

  1. <Link to={{ pathname: `/posts/${post.id}`, query: { show: true } }} />

<Link> 还可以感知当前路由是否对应其配置的链接,如果匹配成功,则将当前 <Link> 标记为激活。当链接激活时,链接会自动应用配置好的 activeClassNameactiveStyle 进行样式改变。

当前路径如果对应 <Link> 上配置的特定路由以及其子路由,都对激活该 <Link>。假如有这样一个链接:

  1. <Link to="/user/posts/233" />

如果当前路径是 /user/user/posts,那么这个 <Link> 也会被认为是激活状态。如果想让该链接仅在 /user/posts/233 时激活,可以给链接配置 onlyActiveOnIndex 属性,或设置 <IndexLink> 标签。 属性

to { Object|String }

to 是一个 location 描述子,通常是一个字符串或对象,拥有如下语义:

  • 字符串表示一个链接的绝对路径(不支持相对路径),如 /users/123
  • 对象可以拥有四个属性:
  • pathname:一个表示当前链接绝对路径的字符串;
  • query:路径查询参数,一个键值对对象;
  • hash:URL 的哈希值,例如 #a-hash;
  • state:保存路径的状态。
  • 如果没有指定,就会创建一个没有 href 属性的 a 标签。

activeStyle { Object }

指定 <link> 在激活时拥有的样式,默认无样式。

activeClassName { Object }

指定 <link> 在激活时获得的类名,默认无类名。

onlyActiveOnIndex { Boolean }

指定 <link> 是否仅在完全匹配时激活,而不在子路径激活。

默认值: false

onClick { Function }

指定点击改 Link 时的跳转行为,默认是进行路由的 push/pop/goto。

target { String }

制定链接 target,与 a 标签的 target 效果一致,进行设置后将不进行路由控制。

type { String }

制定链接类型,共有三种类型:push/pop/goto,对应各自的路由行为。默认为 push 操作,即打开一个新页面。

默认值: push

params { object }

制定在 push、pop 和 goto 时携带的参数,供生命周期监听。