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="…">。
儲存您的變更並檢查它是否在您的本地主機上正常運作。您現在應該能夠在頁面之間導航而不會看到完整的重新整理。雖然您的應用程式部分是在伺服器上呈現的，但沒有完整的頁面重新整理，使其感覺像是一個網路應用程式。這是為什麼呢？
自動程式碼分割和預取
為了改善導航體驗，Next.js 會根據路由區段自動分割您的應用程式程式碼。這與傳統的 React 單頁應用程式 (SPA) 不同，在傳統的單頁應用程式中，瀏覽器會在初始載入時載入所有應用程式程式碼。
透過路由分割程式碼意味著頁面會被隔離。如果特定頁面發生錯誤，應用程式的其餘部分仍將正常運作。
此外，在正式環境中，只要 <Link> 元件出現在瀏覽器的視埠中，Next.js 就會在背景中自動**預取**連結路由的程式碼。當使用者點擊連結時，目標頁面的程式碼將已在背景中載入，這就是頁面轉換近乎即時的原因！
深入瞭解導航的運作方式。
模式：顯示作用中連結
一個常見的 UI 模式是顯示作用中連結，以向使用者指出他們目前所在的頁面。要做到這一點，您需要從網址取得使用者的目前路徑。Next.js 提供了一個名為 usePathname() 的 hook，您可以使用它來檢查路徑並實作此模式。
由於 usePathname() 是一個 hook，您需要將 nav-links.tsx 轉換為 Client Component（客戶端元件）。在檔案頂部新增 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 函式庫，根據連結是否處於活動狀態來設定 class 名稱。當 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>
);
})}
</>
);
}儲存並檢查您的 localhost。您現在應該會看到活動連結以藍色醒目顯示。
這有幫助嗎？