reactjsnext.jsnext.js13nextjs-dynamic-routingnext.js14

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


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 ?


Solution

  • 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>
      )
    }
    
    1. 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.