时间戳

首页 > 解决方案 > Next.JS “Link” vs “router.push()” vs “a” 标签

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

问题描述

新手在这里，对不起，如果这是一个非常基本的问题，但我无法理解应该遵循哪种技术来浏览各个页面。

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

  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>

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

标签： javascriptnext.js

解决方案

路由器.push

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

<Link>

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

<a>

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

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

推荐阅读