usePathname

usePathname 是一個客戶端元件 (Client Component) 鉤子，可讓您讀取當前 URL 的路徑名稱 (pathname)。

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

usePathname 刻意要求使用客戶端元件 (Client Component)。需要注意的是，客戶端元件並非效能劣化，而是伺服器元件 (Server Components) 架構中不可或缺的一部分。

例如，帶有 usePathname 的客戶端元件會在初始頁面載入時渲染成 HTML。當導航到新路由時，無需重新獲取此元件。相反地，該元件只需下載一次（在客戶端 JavaScript 套件中），並根據當前狀態重新渲染。

須知事項:

• 不支援從伺服器元件 (Server Component) 讀取當前 URL。此設計是為了在頁面導航時保持佈局狀態。
• 相容性模式：
  • 當渲染後備路由 (fallback route) 或當 pages 目錄頁面被 Next.js 自動靜態優化 (automatically statically optimized) 且路由器尚未準備好時，usePathname 可能返回 null。
  • 在 next.config 或 中介軟體 (Middleware) 中使用 usePathname 與重寫規則時，必須同時使用 useState 和 useEffect 以避免水合 (hydration) 不匹配錯誤。
  • 如果 Next.js 檢測到專案中同時存在 app 和 pages 目錄，它會自動更新您的類型。

參數

const pathname = usePathname()

usePathname 不接受任何參數。

返回值

usePathname 返回當前 URL 的路徑名稱字串。例如：

範例

根據路由變更執行某些操作

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // 在此執行某些操作...
  }, [pathname, searchParams])
}