How to pass data with router.push from 'next/navigation'

Question

How can we pass the data from one route to another route programatically using router.push api of useRouter() from next/navigation ?

Also how can we perform url masking in router.push api from next/navigation which was possible in router.push from next/router ?

Answer 1

thess are actually two questions.

1. use query parameter to pass data.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard?prop=value')}>
      Dashboard
    </button>
  )
}

2. url masking is not recommended

asPath has been removed because the concept of as has been removed from the new router. Not recommended to use as.