usePathname 是一个 客户端组件 Hook，它允许您读取当前 URL 的 pathname。
须知：当
cacheComponents启用时，如果您的路由包含动态参数，usePathname可能需要一个Suspense边界来包裹它。如果您使用generateStaticParams，则Suspense边界是可选的。
'use client'
import { usePathname } from 'next/navigation'
export default function ExampleClientComponent() {
const pathname = usePathname()
return <p>Current pathname: {pathname}</p>
}'use client'
import { usePathname } from 'next/navigation'
export default function ExampleClientComponent() {
const pathname = usePathname()
return <p>Current pathname: {pathname}</p>
}usePathname 有意要求使用 客户端组件。需要注意的是，客户端组件并非性能倒退，它们是 服务器组件 架构不可或缺的一部分。
例如，一个包含 usePathname 的客户端组件将在初始页面加载时被渲染为 HTML。当导航到一个新路由时，这个组件不需要被重新获取。相反，组件只需下载一次（在客户端 JavaScript 包中），并根据当前状态进行重新渲染。
须知：
如果您的组件使用了 usePathname 并且被导入到 Pages Router 中的路由里，请注意，如果路由器尚未初始化，usePathname 可能会返回 null。这可能发生在 fallback routes 或 Pages Router 中的 Automatic Static Optimization 期间。
为了增强路由系统之间的兼容性，如果您的项目同时包含 app 和 pages 目录，Next.js 将自动调整 usePathname 的返回类型。
const pathname = usePathname()usePathname 不接受任何参数。
usePathname 返回当前 URL 的 pathname 字符串。例如：
| URL | 返回值 |
|---|---|
/ | '/' |
/dashboard | '/dashboard' |
/dashboard?v=2 | '/dashboard' |
/blog/hello-world | '/blog/hello-world' |
'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
function ExampleClientComponent() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
// Do something here...
}, [pathname, searchParams])
}'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
function ExampleClientComponent() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
// Do something here...
}, [pathname, searchParams])
}当页面进行预渲染时，HTML 是为源 pathname 生成的。如果之后通过 next.config 或 Proxy 的重写访问该页面，浏览器 URL 可能会有所不同，并且 usePathname() 将在客户端读取重写后的 pathname。
为了避免水合作用不匹配，请将 UI 设计为只有一小部分、独立的部分依赖于客户端 pathname。在服务器上渲染一个稳定的 fallback，并在挂载后更新该部分。
'use client'
import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
export default function PathnameBadge() {
const pathname = usePathname()
const [clientPathname, setClientPathname] = useState('')
useEffect(() => {
setClientPathname(pathname)
}, [pathname])
return (
<p>
Current pathname: <span>{clientPathname}</span>
</p>
)
}'use client'
import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
export default function PathnameBadge() {
const pathname = usePathname()
const [clientPathname, setClientPathname] = useState('')
useEffect(() => {
setClientPathname(pathname)
}, [pathname])
return (
<p>
Current pathname: <span>{clientPathname}</span>
</p>
)
}| 版本 | 更改 |
|---|---|
v13.0.0 | 引入了 usePathname。 |