How can i pass pathname and query in Next js 13.4 to router.push() in App router?

[Raghunadh9]

My instructor using Next js 11 version, he used to import router from "next/router". but as we know that next/router has been depreciated. he passes pathname and query to the router.push like this:

 router.push({
      pathname: path,
      query: query,
    });

How can i do it in App router? We need to update. not degrade. any suggestions?

[geekerio]

you can use

import { useRouter} from 'next/navigation';

const router = useRouter()
router.push(/path?query=${query})

[palminha]

@geekerio that's an ugly way... we should be able to do with route/navigation the same as we did with route/router, particularly with pathname and query

@Raghunadh9 I'm struggling as you... how did you solve it?

[Aman-Clement]

@geekerio I'm struggling with the same, did you find any workaround?

[Devintel-byte]

I had same issues and tried some workarounds, this solution worked for me:

import {useRouter} from "next/navigation"

const navigate = useRouter();

const query = new URLSearchParams({
imageSrc,
title,
postSponsor,
}).toString();

navigate.push(/donation?${query});

the imageSrc, title, postSponsor are params.

[Devintel-byte]

I had same issues and tried some workarounds, this solution worked for me:

import {useRouter} from "next/navigation"

const navigate = useRouter();

const query = new URLSearchParams({
imageSrc,
title,
postSponsor,
}).toString();

navigate.push(`/donation?${query}`);

the imageSrc, title, postSponsor are params.

[Farzin-Firoozi]

You can write a custom hook to achieve it, here's an example I use in my projects:

import { useRouter as useNextRouter } from 'next/navigation'

const useRouter = () => {
  const { push: nextPush, ...rest } = useNextRouter()

  const customPush = ({
    pathname,
    query,
  }: {
    pathname: string
    query: Record<string, any>
  }) => {
    const generateQuery = new URLSearchParams(query).toString()

    nextPush(`${pathname}?${generateQuery}`)
  }

  return { ...rest, push: customPush }
}

export default useRouter