章节5

页面间导航

在上一章中，您创建了仪表盘布局和页面。现在，让我们添加一些链接，允许用户在仪表盘路由之间导航。

在本章中...

我们将涵盖以下主题：

如何使用 next/link 组件。

如何使用 usePathname() 钩子显示活动链接。

Next.js 中的导航如何工作。

要在页面之间链接，您通常会使用 <a> HTML 元素。目前，侧边栏链接使用 <a> 元素，但请注意当您在浏览器中导航到主页、发票和客户页面时会发生什么。

您看到了吗？

每次页面导航都会进行一次完整的页面刷新！

`<Link>` 组件

在 Next.js 中，您可以使用 <Link /> 组件在应用程序中的页面之间进行链接。<Link> 允许您使用 JavaScript 进行客户端导航。

要使用 <Link /> 组件，请打开 /app/ui/dashboard/nav-links.tsx，并从 next/link 导入 Link 组件。然后，将 <a> 标签替换为 <Link>

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

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

保存更改并在您的本地主机中检查它是否有效。您现在应该能够在页面之间导航而不会看到完整的刷新。尽管您的应用程序的部分内容是在服务器上渲染的，但没有完整的页面刷新，这使得它感觉像一个原生的 Web 应用程序。这是为什么呢？

自动代码分割和预取

为了改善导航体验，Next.js 会根据路由段自动对您的应用程序进行代码分割。这与传统的 React SPA 不同，在 SPA 中，浏览器会在初始页面加载时加载所有应用程序代码。

按路由分割代码意味着页面是隔离的。如果某个页面抛出错误，应用程序的其余部分仍将正常工作。这也减少了浏览器需要解析的代码量，从而使您的应用程序更快。

此外，在生产环境中，每当 <Link> 组件出现在浏览器的视口中时，Next.js 会自动在后台**预取**链接路由的代码。当用户点击链接时，目标页面的代码就已经在后台加载完成，这使得页面转换几乎是即时的！

了解更多关于导航如何工作。

模式：显示活动链接

一种常见的 UI 模式是显示一个活动链接，以向用户指示他们当前所在的页面。为此，您需要从 URL 获取用户的当前路径。Next.js 提供了一个名为 usePathname() 的钩子，您可以使用它来检查路径并实现此模式。

由于 usePathname() 是一个 React 钩子，您需要将 nav-links.tsx 转换为客户端组件。在文件顶部添加 React 的 "use client" 指令，然后从 next/navigation 导入 usePathname()

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

接下来，在您的 <NavLinks /> 组件中将路径分配给一个名为 pathname 的变量

export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

注意：nav-links.tsx 不是 Next.js 的特殊文件 — 它可以命名为您想要的任何名称。如果您重命名它，请确保相应地更新导入语句。

您可以使用在关于 CSS 样式一章中介绍的 clsx 库，在链接处于活动状态时有条件地应用类名。当 link.href 与 pathname 匹配时，链接应以蓝色文本和浅蓝色背景显示。

以下是 nav-links.tsx 的最终代码

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

保存并检查您的本地主机。您现在应该会看到活动链接以蓝色突出显示。

页面间导航

为什么要优化导航？

`<Link>` 组件

自动代码分割和预取

模式：显示活动链接

您已完成本章5

页面间导航

为什么要优化导航？

<Link> 组件

自动代码分割和预取

模式：显示活动链接

您已完成本章5

`<Link>` 组件