usePathname usePathname 是一个客户端组件 hook，用于读取当前 URL 的路径名。
app/example-client-component.tsxTypeScriptTypeScriptJavaScript'use client'
import { usePathname } from 'next/navigation'
export default function ExampleClientComponent() {
const pathname = usePathname()
return
当前路径名：{pathname}
}
usePathname 有意要求使用客户端组件。需要注意的是，客户端组件并不是一种去优化。它们是 Server Components 架构中不可或缺的一部分。
例如，在初始页面加载时，带有 usePathname 的客户端组件将被渲染成 HTML。当导航到新路由时，这个组件不需要重新获取。相反，该组件只需下载一次 (在客户端 JavaScript 包中)，并根据当前状态重新渲染。
值得注意的是：
在服务器组件中读取当前 URL 是不支持的。这种设计是有意为之，目的是支持在页面导航过程中保留布局状态。
兼容模式：
当渲染回退路由时，或者当 pages 目录页面被 Next.js 自动静态优化且路由器尚未准备好时，usePathname 可能返回 null。
当在 next.config 或 Middleware 中使用重写功能的同时使用 usePathname 时，必须同时使用 useState 和 useEffect 以避免水合不匹配错误。更多信息请参见重写示例。
如果 Next.js 检测到你的项目中同时存在 app 和 pages 目录，它将自动更新你的类型定义。
参数
const pathname = usePathname()
usePathname 不接受任何参数。
返回值
usePathname 返回当前 URL 路径名的字符串。例如：
URL返回值/'/'/dashboard'/dashboard'/dashboard?v=2'/dashboard'/blog/hello-world'/blog/hello-world'
示例
响应路由变化执行操作
app/example-client-component.tsxTypeScriptTypeScriptJavaScript'use client'
import { usePathname, useSearchParams } from 'next/navigation'
function ExampleClientComponent() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
// 在这里执行操作...
}, [pathname, searchParams])
}
版本变更v13.0.0引入 usePathname