Next.js Discord

Discord Forum

App router routing with searchParams

Unanswered
inam posted this in #help-forum
Open in Discord
Avatar
inamOP
Lets say I'm in a url localhost:3000/customer/[customerId]?folderId=252&subFolder=565
From here usinag a onclick event I want to send to localhost:3000/customer/[customerId]?folderId=1255&subFolder=89898
What is the best way to do it
I'm using Nextjs App router

13 Replies

Avatar
risky
so do you want to change url, or send fetch request for the onclick?
if link, you can use next/navigation's useRouter.push or next/link if just a link button
Avatar
inamOP
Yh I'm using a link
How to set the href properly ?
when I get the pathname from usePathname it only gives me localhost:3000/customer/[customerId] this
Avatar
risky
what about: [useSearchParams](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
but is this a client or server component
if server, cant you get the search parms from the page function too?
Avatar
inamOP
so code would be
const pathname = usePathname()
 const searchParam = useSearchParams()
const folderId = searchParam.get('folderId')

 

// and in Link
<Link href={`${pathname}?folderId=${folderId}&subFolder=${props.id}`} />
Its a client component
Avatar
risky
in threory this makes sense, does it work?
Avatar
inamOP
Yh it works
I wanted to know is there a way just update that particular searchParam and route it to new url
Avatar
risky
look at this example, but basicly it is just using the same things and just making sure the others exist still https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams