路由
NextUI 元件，例如 Tabs、Listbox、Dropdown 和許多其他元件，都可彈性地渲染為 HTML 連結。
簡介
預設情況下，連結在互動時會執行瀏覽器原生導航。然而，許多應用程式和框架使用客戶端路由來避免在頁面之間導航時重新載入整個頁面。
NextUIProvider 元件會配置其中的所有 NextUI 元件，以使用您提供的客戶端路由進行導航。
在您應用程式的 root 中設定一次，任何具有 href 屬性的 NextUI 元件都會自動使用您的路由進行導航。
NextUIProvider 設定
NextUIProvider 元件接受 navigate 和 useHref 屬性。navigate 是一個用於客戶端導航的路由函式，而 useHref 則可選擇性地將路由 href 轉換為原生 HTML href。以下是範例：
注意：以下顯示特定框架的範例。
路由選項
所有 NextUI 連結元件都接受 routerOptions 屬性，該屬性會將選項傳遞給路由的導航函式，以控制捲動和歷史導航等行為。
當使用 TypeScript 時，您可以全域配置 RouterConfig 類型，以便所有連結元件都具有自動完成和類型安全，並使用您的路由提供的類型。
Next.js
App Router
前往您的 app/providers.tsx 或 app/providers.jsx (如果不存在則建立)，並新增來自 next/navigation 的 useRouter hook，它會傳回一個可用於執行導航的路由器物件。
如需更多詳細資訊，請參閱 Next.js 文件。
新增 useRouter
將 Provider 新增至 Root
現在，前往您的 root 版面配置頁面，並使用 NextUIProvider 包裹它。
注意：如果您已在應用程式中設定
NextUIProvider，請跳過此步驟。
Next.js Base Path (選用)
如果您正在使用 Next.js 的 basePath 設定，您需要配置環境變數才能存取它。
然後，提供自訂的 useHref 函式，將其前置到所有連結的 href。
頁面路由 (Pages Router)
前往頁面 /_app.js 或 pages/_app.tsx (如果不存在，請建立它)，並加入來自 next/router 的 useRouter hook，它會回傳一個可以用來執行導航的 router 物件。
當使用 basePath 設定選項時，請為傳遞給 Provider 的 router 提供 useHref 選項，以便自動將其添加到連結前面。
React Router
使用來自 react-router-dom 的 useNavigate hook 來取得用於路由的 navigate 函式。 useHref hook 可以與 React Router 的 basename 選項一起使用。
請確保將使用這些 hook 的元件放置在 BrowserRouter 內，並將 <Routes> 保留在 NextUIProvider 內。以下是如何在您的 App 元件中設定它
請確保呼叫 useNavigate 並渲染 NextUIProvider 的元件位於路由元件（例如 BrowserRouter）內，以便它可以存取 React Router 的內部上下文。 React Router 的 <Routes> 元素也應該定義在 NextUIProvider 內，以便渲染路由內的連結可以存取 router。
Remix
Remix 在底層使用 React Router，因此上述的 useNavigate 和 useHref hook 也適用於 Remix 應用程式。NextUIProvider 應該在每個包含 NextUI 元件的頁面的 root 處渲染，或在 app/root.tsx 中渲染，以將其添加到所有頁面。有關更多詳細資訊，請參閱 Remix 文件。
TanStack
若要將 TanStack Router 與 NextUI 一起使用，請在您的根路由內渲染 NextUI 的 RouterProvider。在 navigate prop 中使用 router.navigate，並在 useHref prop 中使用 router.buildLocation。
使用範例
現在您已經在應用程式中設定了 NextUIProvider，您可以使用 Tabs、Listbox 和 Dropdown 項目中的 href prop 在頁面之間導航。
Link 元件也將使用來自 NextUIProvider 的 navigate 函式在頁面之間導航。
如需更多關於 React Aria 中路由的資訊，請參閱React Aria 路由指南。
