usePathname

usePathname 是一个 客户端组件 Hook，允许你读取当前 URL 的 pathname。

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

usePathname 有意要求使用客户端组件。重要的是要注意，客户端组件并非反优化。它们是 服务器组件 架构不可或缺的一部分。

例如，带有 usePathname 的客户端组件将在初始页面加载时渲染为 HTML。当导航到新路由时，此组件无需重新获取。相反，该组件下载一次（在客户端 JavaScript 包中），并根据当前状态重新渲染。

须知:

• 不支持从服务器组件读取当前 URL。此设计是有意为之，旨在支持跨页面导航保留布局状态。
• 兼容模式
  • 当 fallback 路由正在渲染，或者当 pages 目录页面已被 Next.js 自动静态优化，并且路由器尚未准备就绪时，usePathname 可能会返回 null。
  • 当在 next.config 或 Middleware 中使用带有 rewrites 的 usePathname 时，为了避免水合不匹配错误，还必须使用 useState 和 useEffect。有关更多信息，请参阅 rewrites 示例。
  • 如果 Next.js 检测到你的项目中同时存在 app 和 pages 目录，它将自动更新你的类型。

参数

const pathname = usePathname()

usePathname 不接受任何参数。

返回值

usePathname 返回当前 URL pathname 的字符串。例如

示例

响应路由更改执行某些操作

'use client'
 
import { usePathname, useSearchParams } from 'next/navigation'
 
function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}