You will need to use useSearchParams
and usePathname
to get query
and pathname
. You can also use router.replace
if you want to update existing history record instead of adding new one.
'use client'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
export default function Page() {
const pathname = usePathname()
const searchParams = useSearchParams()
const router = useRouter()
const updateQuery = () => {
const newUrlParams = new URLSearchParams(searchParams.toString())
newUrlParams.set('filters', ['219', '213'].join(','))
router.push(`${pathname}?${newUrlParams}`)
}
return (
<div>
<button onClick={updateQuery}>Update filter</button>
</div>
)
}