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

例如有这样一个路由：

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

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

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

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

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

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

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

  • <Link to="/user/posts/233" />

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

属性

to { Object|String } #

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

  1. 字符串表示一个链接的绝对路径（不支持相对路径），如 /users/123。
  2. 对象可以拥有四个属性：
  3. pathname：一个表示当前链接绝对路径的字符串；
  4. query：路径查询参数，一个键值对对象；
  5. hash：URL 的哈希值，例如 #a-hash；
  6. state：保存路径的状态。
  7. 如果没有指定，就会创建一个没有 href 属性的 a 标签。

activeStyle { Object } #

指定 在激活时拥有的样式，默认无样式。

activeClassName { Object } #

指定 在激活时获得的类名，默认无类名。

onlyActiveOnIndex { Boolean } #

指定 是否仅在完全匹配时激活，而不在子路径激活。

默认值: false

onClick { Function } #

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

target { String } #

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

type { String } #

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

默认值: push

params { object } #

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