how to query items from useRouter() hock in case i'm using nextjs with App Router approach

This was the way to do it using Pages Router

import { useRouter } from "next/router";

import React from "react";

function ShowroomListings({}) {
  const router = useRouter();
  const { listingId } = router.query as { listingId: string };

  return <div>This is item No. {listingId}</div>;
}

export default ShowroomListings;

Failed to compile message

Now I imported useRouter from "next/navigation" this time, but '.query' will not work anymore

import { useRouter } from "next/navigation";

import React from "react";

function ShowroomListings({}) {
  const router = useRouter();
  const { listingId } = router.query as { listingId: string };

  return <div>This is item No. {listingId}</div>;
}

export default ShowroomListings;

useRouter only works on client-component (while your component is a server-component). You can add 'use client' directive to top of the file to use useRouter.

Update:

• The query object has been removed and is replaced by useSearchParams

Reference:

1. Next.js useRouter
2. Next.js 'use client' directive
3. Next.js useSearchParams

it worked for me

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React from "react";

type ShowroomProps = {
  params: {
    listingId: string;
  };
};

export default function ShowroomListings({
  params: { listingId },
}: ShowroomProps) {
  return <div>This is item No. {listingId}</div>;
}

<!-- end snippet -->

just passing the right dynamic route value

You cannot use useRouter hook in server component, because it is a client side hook. You need to make you component client inorder to get query parameters.

'use client'

also nextjs introduce new hook for query parameters which is useSearchParams, you can easily get query param with.

const params = useSearchParms()
params.get("query-parameter-name")