5
章節5
頁面之間導航
在前一章節中，您建立了儀表板佈局和頁面。現在，讓我們新增一些連結，讓使用者能夠在儀表板路由之間導航。
在本章節中...
以下是我們將涵蓋的主題
如何使用 next/link 元件。
如何使用 usePathname() Hook 顯示作用中連結。
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 不同，後者會在初始頁面載入時載入您所有的應用程式碼。
依路由分割程式碼表示頁面會變得隔離。如果特定頁面拋出錯誤，應用程式的其餘部分仍然可以運作。這也減少了瀏覽器需要解析的程式碼量，從而使您的應用程式更快。
此外，在生產環境中，每當 <Link> 元件出現在瀏覽器的可視區域時，Next.js 就會自動在背景預先載入連結路由的程式碼。當使用者點擊連結時，目標頁面的程式碼已經在背景中載入，這就是使頁面轉換幾乎即時的原因！
深入瞭解導航的運作方式。
模式：顯示作用中連結
常見的 UI 模式是顯示作用中連結，以向使用者指示他們目前所在的頁面。若要執行此操作，您需要從 URL 取得使用者目前的路徑。Next.js 提供一個名為 usePathname() 的 Hook，您可以使用它來檢查路徑並實作此模式。
由於 usePathname() 是 React Hook，您需要將 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();
// ...
}您可以使用在關於 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>
);
})}
</>
);
}儲存並檢查您的本機伺服器。您現在應該會看到作用中連結以藍色突顯。
這有幫助嗎？