Next.js Discord

Discord Forum

App router routing with searchParams

Unanswered
Swedish White Elkhound posted this in #help-forum
Open in Discord
Avatar
Swedish White ElkhoundOP
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 did start the fire 🙃
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
Swedish White ElkhoundOP
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 did start the fire 🙃
but is this a client or server component
if server, cant you get the search parms from the page function too?
Avatar
Swedish White ElkhoundOP
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 did start the fire 🙃
in threory this makes sense, does it work?
Avatar
Swedish White ElkhoundOP
Yh it works
I wanted to know is there a way just update that particular searchParam and route it to new url
Avatar
Risky did start the fire 🙃
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