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

The Problem:

In Next.js applications using the App Router approach, how can I access query parameters from the useRouter hook?

The Solutions:

Solution 1: Use the ‘use client’ directive

To use `useRouter` in a server-component, add the `’use client’` directive at the top of the file. This indicates that the component should only be rendered on the client-side, where `useRouter` is available.

Here’s the updated code:

“`jsx
import { useRouter } from “next/navigation”;

import React from "react";

function ShowroomListings() {
// Add the ‘use client’ directive to indicate that this component should only be rendered on the client-side
use client;

const router = useRouter();
const = router.query as ;

return

;
}

export default ShowroomListings;

<h3>Solution 2: Use the 'useSearchParams' hook</h3>
<p>
  Since Next.js version 13, the `query` object has been removed and replaced by the `useSearchParams` hook. This hook provides a more flexible way to manage URL search parameters.
</p>
<p>
  Here's how you can use the `useSearchParams` hook to get the `listingId` parameter:
</p>
```jsx
import { useSearchParams } from "next/navigation";

import React from "react";

function ShowroomListings({}) {
  const [searchParams] = useSearchParams();
  const listingId = searchParams.get("listingId");

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

export default ShowroomListings;

Solution 2: Using useSearchParams and client component

Since useRouter is a client-side hook, it cannot be used in server components. To access query parameters from an App Router component, you should:

1. Make the component a client component using use client.
2. Use the useSearchParams hook to access the query parameters.
3. Obtain the specific query parameter using params.get("query-parameter-name").

Solution 3: Use Params object

When using the App Router approach in Next.js, you can access query parameters using the `params` object instead of `query`. Here’s an updated code snippet that should work:

import React from "react";

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

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

Video Explanation: