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

Question

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;

Checkout https://stackoverflow.com/questions/76242781/how-to-change-and-add-query-strings-in-the-app-folder-of-next-js. — Youssouf Oumar, Jun 12 '23 at 10:11

Nhan Luong · Answer 1 · 2023-06-12T10:42:03.843

1

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:

edited Jun 12 '23 at 10:42

answered Jun 12 '23 at 10:04

Nhan Luong

41
4

"use client" was added actually as the error goes – Anas Ghareib Jun 12 '23 at 10:13
1

Ah I've checked the docs. The `query` object has been removed. You can use `useSearchParams` instead. https://nextjs.org/docs/app/api-reference/functions/use-search-params – Nhan Luong Jun 12 '23 at 10:18

score 0 · Answer 2 · answered Jun 12 '23 at 13:02

it worked for me

import React from "react";

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

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

just passing the right dynamic route value

score 0 · Answer 3 · answered Jun 12 '23 at 13:26

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")

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

3 Answers3