Add URL params to usePathname

[ptvty]

For the directory structure below:

/posts
  /[user_id]
    /[post_id]
      /page.tsx

There seems to be two hooks to get the current URL:

• useParams returns params in object format {user_id: '1', post_id: '2'} and works in the server-side
• usePathname returns the current full URL /posts/1/2 and works only in the client-side

I need to get the URL params in the client side and get those in clean object format.
My use case is to have client-side navigation for switching tabs. I'm using window.history.pushState as advised here in the docs:

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api

pushState and replaceState calls integrate into the Next.js Router, allowing you to sync with usePathname and useSearchParams.

So I have to get the full URL using usePathname and parse it manually to find user_id and post_id.

Is this the correct way to achieve this?

useParams keeps the original values from the initial request and does not update when window.history is used for a navigation. I would be happy if it retained its functionality in the client-side or I could have the same object format added to usePathname or useSearchParams as they get updated on client-side URL change.

[ptvty]

@icyJoseph Here's a PoC
https://github.com/ptvty/use-params

The useParams value updates only when you refresh the page.
But usePathname and useSearchParams update immediately client-side.

[icyJoseph]

Awesome, I was not happy enough with my original answer, but wanted to explore this deeply, I'll take a look soon enough!

[ptvty]

Related: #70779