链接标签中的'href'和'to'属性有什么区别？

Question

在学习 React 时，我偶然发现一个我以前从未见过的属性：Link 标签上的“to”。

<Link to="/login" className="btn btn-link">Cancel</Link>

找不到相关文档 - 我猜这是 React 特定属性，因为我在常规文档中找不到它。

与“href”相比必须有区别，否则它不应该存在;)
有人能指出我正确的方向吗？

Answer 1

那是一个 React Router

<Link/>

，所以它有点特别。它与

<Router>

和

<Route>

组件相关联，用于在单页应用程序中导航。标准锚标记（即使它有一个

href

与您的

<Route>

路径之一匹配）不会与 React Router 交互，因此会导致整页重新加载。

Answer 2

它是一个用于导航的 React Router 道具。它可以是一个对象或字符串。

to - 要链接到的位置的字符串表示形式，通过连接位置的路径名、搜索和哈希属性创建。

to - 可以具有以下任何属性的对象：

• pathname：表示链接路径的字符串。
• search：查询参数的字符串表示形式。
• hash：放入 URL 中的哈希值，例如#a-哈希。
• state：坚持到该位置的状态。

反应路由器文档

Answer 3

由于

<Link />

是来自第三方库的组件，因此它可以拥有任何它想要的 props，并且不限于 React 文档中的 html 元素 props。

在本例中，

to

是React Router使用的prop的名称，用于指定Link组件在单击时应“链接到”的位置。

Answer 4

<Link>

标签通常用于链接到其他文档，例如 CSS 样式表。

标签用于链接到外部页面，例如

<a href="https://www.youtube.com"></a>

会将用户带到 YouTube。