5
章节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>标签，但不是<a href="…">，而是使用<Link href="…">。
保存更改并检查它是否在您的本地主机上有效。您现在应该能够在页面之间导航，而无需看到完整的刷新。尽管应用程序的某些部分是在服务器端渲染的，但没有完整的页面刷新，这使其感觉像是一个 Web 应用程序。这是为什么呢？
自动代码分割和预取
为了改善导航体验，Next.js 会根据路由段自动分割您的应用程序代码。这与传统的 React SPA不同，在传统的 SPA 中，浏览器会在初始加载时加载所有应用程序代码。
按路由分割代码意味着页面变得彼此隔离。如果某个页面出现错误，应用程序的其余部分仍将正常工作。
此外，在生产环境中，每当<Link>组件出现在浏览器的视口中时，Next.js 都会自动在后台预取链接路由的代码。当用户点击链接时，目标页面的代码将已在后台加载，这就是使页面过渡接近即时的原因！
详细了解导航工作原理。
模式：显示活动链接
一个常见的 UI 模式是显示活动链接，以向用户指示他们当前所在的页面。为此，您需要从 URL 中获取用户的当前路径。Next.js 提供了一个名为usePathname()的钩子，您可以使用它来检查路径并实现此模式。
由于usePathname()是一个钩子，您需要将nav-links.tsx转换为客户端组件。将 React 的"use client"指令添加到文件的顶部，然后从next/navigation导入usePathname()
'use client';
import {
UserGroupIcon,
HomeIcon,
InboxIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
// ...接下来，在您的<NavLinks />组件内部将路径分配给名为pathname的变量
export default function NavLinks() {
const pathname = usePathname();
// ...
}您可以使用在关于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>
);
})}
</>
);
}保存并检查您的本地主机。您现在应该看到活动链接以蓝色突出显示。
这有帮助吗？