Next.JS “Link” vs “router.push()” vs “a”标签

Question

新手，抱歉，如果这是非常基本的问题，但我无法确定应该遵循哪种技术来浏览各个页面。

到目前为止，我知道三种不同的方法可以实现这一目标：

1. 导出的链接组件 next/link
2. router.push() 使用 useRouter 导出 ny next/router
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>

所有的方法都可以工作并实现完全相同的目标。我只是想知道这些方法之间有什么区别（如果有的话）。非常感谢您！

Answer 1

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

Answer 2

路由器推送

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

<Link>

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

<a>

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

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

Answer 3

所有其他答案都指出了每种方法的特点，特别是它如何影响您的搜索引擎优化。

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

在底层，只有当您传递字符串作为子项时<Link>才会创建标签。<a>传递所有其他元素（例如<div>、 except <a>）不会创建<a>标签来包装底层组件。当这种情况发生时，Next/Link 将仅使用 Next/Router 进行命令式路由，因此不会给 SEO 带来任何好处。

源代码

Answer 4

按钮用于操作，链接用于去往某处。

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

在做出决定之前，请考虑以下几点：

1. router.push()主要用于事件处理程序（onClick此处）。这是一个动作。假设您单击按钮，然后执行一些任务，然后根据结果将用户带到另一个页面。那么你会想要使用router.push(). 不要只是为了转到另一个页面而使用它。请注意，如果您希望它被抓取，这对 SEO 不利。

2. <Link>为你做了一些繁重的工作，并有一堆道具，你可以通过这些道具来定制它。这是您大部分时间转到另一个页面所需要的。当您使用它时，默认浏览器重新加载整个页面的行为（如您在<a>标签中看到的）被覆盖。爬虫将其视为指向另一个页面的链接，因此对 SEO 有好处。

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