usePathname

编程语言

761

usePathname

usePathname 是一个 客户端组件 的钩子，它允许你读取当前 URL 的 路径名。


// app/example-client-component.tsx
'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 是不支持的。这种设计是为了支持在页面导航之间保持布局状态。

兼容模式：

当正在渲染一个回退路由或者当 pages 目录中的页面被 Next.js 自动静态优化并且路由器尚未准备好时，usePathname 可能会返回 null。

如果你的项目中检测到同时存在 app 和 pages 目录，Next.js 会自动更新你的类型。

参数


const pathname = usePathname()

usePathname 不接受任何参数。

返回值

usePathname 返回一个当前 URL 路径名的字符串。例如：

URL	返回值
`/`	`'/'`
`/dashboard`	`'/dashboard'`
`/dashboard?v=2`	`'/dashboard'`
`/blog/hello-world`	`'/blog/hello-world'`

示例

响应路由变化做某些操作


// app/example-client-component.tsx
'use client'
import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // 在这里做某些操作...
  }, [pathname, searchParams])
}

版本	变更
`v13.0.0`	引入 `usePathname`。

EchoEcho官方

无论前方如何，请不要后悔与我相遇。

1377

发布数

439

关注者

2223431

累计阅读

usePathname 3个月前

参数

返回值

示例

响应路由变化做某些操作

热门教程文档