Next.js14从入门到实战010：NextJS基础篇之页面间的导航

在上一章中，我们创建了dashboard布局和页面。现在，让我们添加一些链接，让用户可以在页面之间导航。

在本章节中，我们将学习

• 如何使用 next/link 组件。
• 如何使用 usePathname() 钩子显示活动链接。
• Next.js 中的导航工作原理

为什么要优化导航？

要在页面之间建立链接，传统上要使用 <a> HTML 元素。目前，侧边栏链接使用的是 <a> 元素，但请注意，当您在浏览器上浏览home、invoices和customers页面时，会发生什么情况。

你看到了吗？

每个页面导航都会刷新整个页面！

组件

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

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

// /app/ui/dashboard/nav-links.tsx
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="..."> 。

保存更改并检查是否能在本地主机上运行。现在你可以在页面之间浏览，而不用完全刷新页面。虽然应用程序的部分内容是在服务器上渲染的，但不会出现完整的页面刷新，让人感觉就像一个网络应用程序。为什么会这样呢？

自动代码分割和预取

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

通过路由分割代码意味着页面变得孤立。如果某个页面出错，应用程序的其他部分仍能正常工作。

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

模式：显示活动链接

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

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

// /app/ui/dashboard/nav-links.tsx
'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  InboxIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

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

// /app/ui/dashboard/nav-links.tsx
export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

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

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

// /app/ui/dashboard/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>
        );
      })}
    </>
  );
}

保存并检查本地页面。现在，您应该可以看到活动链接以蓝色高亮显示。

下一课，我们将学习下，如何设置数据库