Javascript Next.JS"；链接“；vs"；router.push（）；vs"；a「；标签

这里的新手，如果这是一个非常基本的问题，我很抱歉，但我不知道应该遵循哪种技术来浏览不同的页面

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

链接由下一个/链接导出的组件

使用useRouter/next/router的router.push（）

简单HTML

router.push（“/about”）}>关于我

所有的方法都能工作，并实现同样的效果。我只是想知道这些方法之间的区别，如果有的话。提前非常感谢

路由器推送

router.push（'/push'）

的行为类似于window.location。它不会创建一个

标签，这意味着-如果你关注SEO，你的链接将不会被爬虫检测到

但是，

将创建一个

标记，这意味着当爬虫刮取您的站点时，将检测到您的链接。最终用户仍将使用导航，而无需重新加载页面，从而创建单页应用程序的行为

标记而不使用next/link的

创建标准超链接，将最终用户作为新页面指向url。（标准行为）

---

您应该在整个网站中使用

，并在需要重定向的地方使用router.push，以保持单页应用程序的行为。

按钮用于操作，链接用于其他地方。

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

在做出决定之前，请考虑以下因素：

router.push（）

主要用于事件处理程序（

onClick

此处）。这是一个行动。假设您单击按钮，然后执行一些任务，并根据结果将用户带到另一个页面。然后您需要使用

router.push（）

。不要仅仅为了转到另一页而使用它。请注意，如果您希望它被爬网，这对SEO是不利的

为您做了一些繁重的工作，并提供了一系列道具，您可以通过这些道具进行定制。这是你大部分时间进入另一个页面所需要的。当您使用它时，默认浏览器重新加载整个页面的行为（如

标记所示）将被覆盖。爬虫将其视为指向另一个页面的链接，因此它有利于SEO

标记只是一个普通的HTML元素，具有所有默认行为。当您使用它时，会发生完全重新加载。如果正在使用，请尝试切换到

。与

类似，它有利于搜索引擎优化

---

非常感谢你，这是有道理的！通过使用router.push（），我们将失去Next.JS的SEO功能，而Next.JS与react的区别就在于此。通过使用标签，我们将失去Next.JS的SPA功能。在大多数情况下都会有帮助。再次感谢

router.push（'/url'）

不执行

客户端导航

router.push（'/'）

处理客户端转换，此方法适用于下一个/link不够的情况。

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