本页还没有译文
本页 20 段还没译成한국어，下面显示的是英文原文。usePathname
还没翻译译自英文（nextjs.org）本页 20 段都还没译
usePathname is a Client Component hook that lets you read the current URL's pathname.
Good to know
When cacheComponents is enabled usePathname may require a Suspense boundary around it if your route has a dynamic param. If you use generateStaticParams the Suspense boundary is optional
'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 intentionally requires using a Client Component. It's important to note Client Components are not a de-optimization. They are an integral part of the Server Components architecture.
For example, a Client Component with usePathname will be rendered into HTML on the initial page load. When navigating to a new route, this component does not need to be re-fetched. Instead, the component is downloaded once (in the client JavaScript bundle), and re-renders based on the current state.
Good to know
- Reading the current URL from a Server Component is not supported. This design is intentional to support layout state being preserved across page navigations.
- If your page is being statically prerendered and your app has rewrites in
next.configor a Proxy file, reading the pathname withusePathname()can result in hydration mismatch errors—because the initial value comes from the server and may not match the actual browser pathname after routing. See our example for a way to mitigate this issue.
Parameters
const pathname = usePathname()usePathname does not take any parameters.
Returns
usePathname returns a string of the current URL's pathname. For example:
| URL | Returned value |
|---|---|
/ | '/' |
/dashboard | '/dashboard' |
/dashboard?v=2 | '/dashboard' |
/blog/hello-world | '/blog/hello-world' |
Examples
Do something in response to a route change
'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])
}Avoid hydration mismatch with rewrites
When a page is prerendered, the HTML is generated for the source pathname. If the page is then reached through a rewrite using next.config or Proxy, the browser URL may differ, and usePathname() will read the rewritten pathname on the client.
To avoid hydration mismatches, design the UI so that only a small, isolated part depends on the client pathname. Render a stable fallback on the server and update that part after mount.
'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>
)
}| Version | Changes |
|---|---|
v13.0.0 | usePathname introduced. |