页面间导航

Link 组件

当在网站的页面之间链接时,你通常使用 <a> HTML 标签。

在 Next.js 中,你使用了从 next/link 导出的 <Link> 组件包裹 <a> 标签。<Link>允许你对应用程序中的不同页面进行客户端导航。

使用 <Link>

首先,在 pages/index.js 中,从 next/link 导入 Link 组件,方法是在顶部添加这一行:

import Link from 'next/link'

然后修改 h1 标记中的这一行:

Learn <a href="https://nextjs-cn.com">Next.js!</a>

修改为:

Read <Link href="/posts/first-post"><a>this page!</a></Link>

接下来,将 pages/posts/first-post.js 的内容改为:

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

如你所见,Link 组件类似于 <a> 标签的用法,但是你应该使用 <Link href="…"> 而不是 <a href="…">。并用它包裹一个 <a> 标签。

让我们来看看它的运行效果。你现在应该在每一页上都有一个链接,允许你来回切换页面: