nextjs-在页面之间的导航跳转

原文链接：https://nextjs.org/learn/dashboard-app/navigating-between-pages

• 01-nextjs起步
• 02-css样式
• 03-处理字体和图片
• 04-创建layouts 和pages 页面
• 06-设置数据库
• 07-fetch获取数据
• 08-静态和动态渲染
• 09-Streaming数据模式
• 更多

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

本章目标

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

为什么要优化导航

要在页面之间进行链接，传统上会使用HTML元素.目前，侧边栏链接使用元素，但请注意，当您在浏览器上的home、invoices和customers页面之间导航时会发生什么。
你看到了吗？
每进入一个页面导航，都会完整的页面刷新！

组件

在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=“..”>。
保存您的更改并检查它是否在您的 localhost。现在，您应该能够在页面之间导航，而不会看到完全刷新。尽管应用程序的部分内容在服务器上呈现，但没有完整的页面刷新，这让它感觉像一个web应用程序。

自动代码拆分和预取

为了改善导航体验，Next.js会自动按路由对应用程序进行代码分割。这与传统的React SPA不同，后者是浏览器在初始加载时加载所有应用程序代码。
按路由拆分代码意味着页面变得孤立。如果某个页面抛出错误，那么应用程序的其余部分仍然可以工作。
此外，在生产中，每当组件出现在浏览器的视口中时，Next.js在后台自动预取链接路由的代码。当用户点击链接时，目标页面的代码将已经在后台加载，这就是为什么页面转换几乎是即时的！
了解有关导航工作原理的更多信息。

显示激活链接的样式

一种常见的UI模式是显示一个活动链接，向用户指示他们当前所在的页面。为此，您需要从URL获取用户的当前路径。Next.js提供了一个名为[usePathname()](https://nextjs.org/docs/app/api-reference/functions/use-pathname)可以用来检查路径并实现此模式。
由于[usePathname()](https://nextjs.org/docs/app/api-reference/functions/use-pathname)是一个钩子，您需要将nav-links.tsx转换为客户端组件。将React的"use client"指令添加到文件顶部，然后从next/navigation导入[usePathname()](https://nextjs.org/docs/app/api-reference/functions/use-pathname)：

'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与路径名匹配时，链接应显示为蓝色文本和浅蓝色背景。
以下是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>
        );
      })}
    </>
  );
}

保存并检查 localhost。现在，您应该看到活动链接以蓝色突出显示。