How can I update a specific URL search param while preserving the existing ones?
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
Using the App Router and Next.JS 13, how can I update a specific search param without it overwriting all of the other ones? For example, suppose I have:
How can I update just one of those values, (say page for example), while keeping all of the others?
/myroute?page=1&color=red&id=5How can I update just one of those values, (say page for example), while keeping all of the others?
5 Replies
Zenaida Dove
get the current search params, append the new param and do router.push (or router.replace)
const pathname = usePathname()
const currentParams = useSearchParams()
const params = new URLSearchParams(currentParams)
params.append(name, value)
const newParams = params.toString()
router.push(pathname + '?' + newParams)Barbary LionOP
How can i do this using the link component ?
also, how can I get all of the search params using the
useSearchParams hook ? The docs only show methods that allow me to search for specific ones if im understanding it correctly@Barbary Lion also, how can I get all of the search params using the `useSearchParams` hook ? The docs only show methods that allow me to search for specific ones if im understanding it correctly
Zenaida Dove
see MDN docs. there are bunch of methods like params.has(), params.get(), params.getAll(), ...