Nextjs Router.push vs href

Question

对于单击时路由到某个页面，我可以通过两种方式实现

import Router from 'next/router'  

<button onClick={() => Router.push('/about')}>
    <a>Go to About</a>
</button>

和

 <button>
     <a href="/about">Go to About</a>
 </button>

哪一个是 Nextjs 中的最佳实践？

Answer 1

语义html中不允许button内a标签，它们都是交互元素。

对于链接，Next 提供了接受a标签作为子元素的Link组件。 对于按钮，使用<button onClick={() => Router.push('/about')}>text</button>而不a .

Answer 2

在页面之间创建链接的最佳方法是使用您的 nextjs 包。

import Link from "next/link";

然后像这样使用它

<Link href={'/'} params={'id': 1}>
  <a>link</a>
</.Link>

如果使用按名称路由链接的节点 js 路由器 href

Answer 3

为了获得最佳用户体验，我建议使用第三个选项/最佳实践：

import Link from "next/link";

<Link href={"/within/your/page"} passHref>
  <button>go</button> // or any other element
</Link>

在 NextJS 10 之前，如果您的路径具有动态段，您还需要传递“as”，例如：

import Link from "next/link";

<Link href={"/review/[id]"} as={"/review/12"} passHref>
  <button>go</button> // or any other element
</Link>

链接组件/ router.push 启用客户端导航。 这使您的网站导航速度更快。

你可以在这里阅读更多信息：