章节7

链接组件

在网站上进行页面间的链接时，您会使用 <a> HTML 标签。

在 Next.js 中，您可以使用 Link 组件 next/link 在应用程序的页面之间进行链接。<Link> 允许您进行客户端导航，并接受属性，这些属性让您更好地控制导航行为。

使用 `<Link>`

首先，打开 pages/index.js，并在顶部添加以下行来从 next/link 导入 Link 组件

import Link from 'next/link';

然后找到看起来像这样的 h1 标签

<h1 className={styles.title}>
  Learn <a href="https://nextjs.net.cn">Next.js!</a>
</h1>

并将其更改为

<h1 className={styles.title}>
  Read <Link href="/posts/first-post">this page!</Link>
</h1>

接下来，打开 pages/posts/first-post.js 并将其内容替换为以下内容

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

如您所见，Link 组件类似于使用 <a> 标签，但您使用 <Link href="…"> 而不是 <a href="…">。

注意：在 Next.js 12.2 之前，Link 组件必须包裹一个 <a> 标签，但在 12.2 及更高版本中不再需要此操作。

让我们检查它是否有效。现在每个页面都应该有一个链接，允许您来回切换。

链接组件

使用 <Link>

您已完成本章7

使用 `<Link>`