页面之间导航
在上一章中，您创建了 dashboard 的布局和页面。现在，让我们添加一些链接，以便用户可以在仪表板路由之间进行导航。
以下是本章中将涵盖的主题：
- 如何使用
next/link组件。 - 如何使用
usePathname()钩子显示活动链接。 - Next.js 中导航的工作原理。
为什么要优化导航？
为了在页面之间创建链接，传统上会使用 <a> HTML 元素。目前，侧边栏链接使用 <a> 元素，但请注意在浏览器中在主页、发票和客户页面之间导航时发生了什么。
您看到了吗？
每次页面导航时都会出现完整的页面刷新！
<Link> 组件
在 Next.js 中，您可以使用 <Link /> 组件在应用程序的页面之间进行链接。<Link> 允许您使用 JavaScript 进行客户端导航 (opens in a new tab)。
要使用 <Link /> 组件，请打开 /app/ui/dashboard/nav-links.tsx，并从 next/link (opens in a new tab) 导入 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="…">。
保存更改并检查它是否在您的 localhost 上运行。现在，您应该能够在页面之间导航，而无需看到完整的刷新。尽管应用程序的某些部分是在服务器上渲染的，但没有完整的页面刷新，使其感觉像一个 web 应用程序。这是为什么呢？
自动代码拆分和预取
为了提高导航体验，Next.js 会自动按路由段拆分您的应用程序。这与传统的 React SPA (opens in a new tab) 不同，传统 SPA 在初始加载时会加载应用程序的所有代码。
按路由拆分代码意味着页面变得隔离。如果某个页面抛出错误，应用程序的其余部分仍将正常工作。
此外，在生产环境中，每当 <Link> 组件出现在浏览器的视口中时，Next.js 会自动在后台预取链接路由的代码。当用户点击链接时，目标页面的代码将在后台已经加载，这就是使页面过渡几乎瞬间完成的原因！
了解更多关于导航如何工作 (opens in a new tab)的信息。
是时候做个测验了！
模式：显示活动链接
一种常见的用户界面模式是显示活动链接，以向用户指示他们当前所在的页面。为了做到这一点，您需要从 URL 中获取用户当前的路径。Next.js 提供了一个名为 usePathname() 的钩子，您可以使用它来检查路径并实现此模式。
由于 usePathname() (opens in a new tab) 是一个钩子，您需要将 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 样式 (opens in a new tab)章节介绍的 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>
);
})}
</>
);
}保存并检查你的本地主机。现在，你应该看到活动链接以蓝色突出显示。
声明
之前，有网友表示，这个项目挺好的，对他有帮助，来表示感谢！
在此声明下，本项目只是一个中文翻译版本，纯粹的 “为爱发电了”，原版权仍归 Next.js 官方教程所有，本翻译项目无任何商业行为，也不接受任何金钱上的捐赠哈。 如果真的感觉有帮助，就点个 Star 吧，关注下 “编程界” 公众号，上面平常也在分享 Next.js 相关内容。
扫码备注「nextjs」
加入 Next.js 中文技术交流群
关注公众号「编程界」
获取最新 Next.js 开发资讯