App router routing with searchParams

Unanswered

inam posted this in #help-forum

2023-11-09T08:28:49.000Z

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

risky

2023-11-09T08:29:35.000Z

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

inamOP

2023-11-09T08:33:44.000Z

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

risky

2023-11-09T08:36:52.000Z

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?

inamOP

2023-11-09T08:43:50.000Z

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}`} />

@risky if server, cant you get the search parms from the page function too?

inamOP

2023-11-09T08:44:15.000Z

Its a client component

@inam so code would be js const pathname = usePathname() const searchParam = useSearchParams() const folderId = searchParam.get('folderId') // and in Link <Link href={`${pathname}?folderId=${folderId}&subFolder=${props.id}`} />

risky

2023-11-09T08:45:08.000Z

in threory this makes sense, does it work?

inamOP

2023-11-09T08:46:42.000Z

Yh it works
I wanted to know is there a way just update that particular searchParam and route it to new url

risky

2023-11-09T08:48:14.000Z

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