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.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])
}