usePathname

usePathname is aClient Component hook that lets you read the current URL'spathname.

Good to know: WhencacheComponents is enabledusePathname may require aSuspense boundary around it if your route has a dynamic param. If you usegenerateStaticParams theSuspense boundary is optional

'use client'import { usePathname }from'next/navigation'exportdefaultfunctionExampleClientComponent() {constpathname=usePathname()return <p>Current pathname: {pathname}</p>}

usePathname intentionally requires using aClient Component. It's important to note Client Components are not a de-optimization. They are an integral part of theServer Components architecture.

For example, a Client Component withusePathname 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 aServer Component is not supported. This design is intentional to support layout state being preserved across page navigations.
• If your page is being statically pre-rendered and your app hasrewrites innext.config or aProxy 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 ourexample for a way to mitigate this issue.

Parameters

constpathname=usePathname()

usePathname does not take any parameters.

Returns

usePathname returns a string of the current URL's pathname. For example:

Examples

Do something in response to a route change

'use client'import { useEffect }from'react'import { usePathname, useSearchParams }from'next/navigation'functionExampleClientComponent() {constpathname=usePathname()constsearchParams=useSearchParams()useEffect(()=> {// Do something here...  }, [pathname, searchParams])}

Avoid hydration mismatch with rewrites

When a page is pre-rendered, the HTML is generated for the source pathname. If the page is then reached through a rewrite usingnext.config orProxy, the browser URL may differ, andusePathname() 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'exportdefaultfunctionPathnameBadge() {constpathname=usePathname()const [clientPathname,setClientPathname]=useState('')useEffect(()=> {setClientPathname(pathname)  }, [pathname])return (    <p>      Current pathname: <span>{clientPathname}</span>    </p>  )}