Next.JS中的"Link"、"router.push()"和"a"标签的区别

Question

新手在这里，抱歉如果这是极其基础的问题，但我无法理解应该遵循哪种技术来跨越各个页面。

目前我知道三种不同的方法可以实现这一点：

1. next/link 导出的链接组件
2. 使用 next/router 导出的 useRouter 的 router.push()
3. 简单的 HTML <a></a>

<Link href="/about"><a>About me</a></Link>
<a href="/about">About me</a>
<button onClick={() => router.push("/about")}>About me</button>

所有的方法都能够正常工作并实现完全相同的结果。我只是想知道这些方法之间是否有任何区别。非常感谢您提前的帮助！

- PHRYTE

Answer 1

router.push

router.push('/push')的行为类似于window.location。它不创建<a>标签，这意味着-如果您关注SEO，爬虫将无法检测到您的链接。

<Link>

然而，<Link>会创建一个<a>标签，这意味着当爬虫抓取您的网站时，您的链接将被检测到。最终用户仍然可以在不重新加载页面的情况下进行导航，从而创建单页面应用的行为。

<a>

不使用next/link的<Link>的<a>标签会创建一个标准的超链接，将最终用户引导到作为新页面的URL（标准行为）。

您应该在整个网站中使用<Link>，并在需要重定向以保留单页面应用行为的地方使用router.push。

- Someone Special

---

非常感谢，我明白了！使用router.push()方法，将会失去 Next.JS 与 React 的SEO能力上的区别。而如果使用<a>标签，则会失去Next.JS 的SPA能力。在大多数情况下，<Link>标签是最有帮助的。再次感谢！ - PHRYTE

router.push('/url') doesn't does a client-side navigation - Christian LSANGOLA

router.push('/') 处理客户端转换，这种方法在 next/link 不足的情况下非常有用。 - Someone Special

Answer 2

按钮用于操作，链接用于跳转。

如果您正在使用NextJs，我假设SEO对您很重要。

在做出决定之前，请考虑以下事项：

1. router.push()主要用于事件处理程序（这里是onClick）。这是一个操作。所以假设您点击按钮，然后执行某个任务，并根据结果将用户带到另一页。那么您需要使用router.push()。不要仅仅为了跳转到另一页而使用它。请注意，如果您希望被爬行，则这样做对SEO很不利。

2. <Link>为您提供一些重要的功能，并有一些可自定义的属性。这正是您大多数需要跳转另一页时需要的东西。当您使用它时，默认浏览器的整个页面重新加载的行为（如使用<a>标签时所见）会被覆盖。爬虫会将其视为指向另一页的链接，因此这对SEO有益。

3. <a>标签只是一个普通的HTML元素，具有所有默认的行为。当您使用它时，会发生完全的重新加载。如果您正在使用它，请尝试切换到<Link>。与<Link>类似，它对SEO有益。

- sohaibalam67

---

如果您在Next.js中使用recoil，那么Link和router.push()之间存在差异。在我的情况下，使用Link会导致状态丢失，而使用router.push则不会。 - MehranTM

Answer 3

除了提供的原因外，<Link> 组件还包括预取。这意味着视口中或悬停在其上的任何 <Link> 链接到的所有页面都会提前加载，准备好在点击时显示。

- Ryan

Answer 4

其他答案已经指出了每种方法的特点，特别是它对您的SEO的影响。

需要注意的是，使用<Link>并不总是自动创建<a>标签。

实际上，只有在将字符串作为子元素传递时，<Link>才会创建<a>标签。如果传递的是所有其他元素，如<div>，除<a>外，则不会创建<a>标签来包装您的基础组件。当发生这种情况时，Next / Link将仅使用Next / Router进行命令式路由，因此在SEO方面没有任何好处。

源代码

- empiskm

---

因此 - Mondo Duke