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

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 stackoverflow.com/questions/76242781/….

Youssouf Oumar
– Youssouf Oumar

2023-06-12 10:11:51 +00:00
Commented Jun 12, 2023 at 10:11 — Youssouf Oumar
– Youssouf Oumar, Commented Jun 12, 2023 at 10:11

Nhan Luong · Accepted Answer · 2023-06-12 10:42:03Z

3

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, 2023 at 10:42

answered Jun 12, 2023 at 10:04

Nhan Luong

715 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anas Ghareib Over a year ago

"use client" was added actually as the error goes

Nhan Luong Over a year ago

Ah I've checked the docs. The query object has been removed. You can use useSearchParams instead. nextjs.org/docs/app/api-reference/functions/use-search-params

Ahsan Khan · Accepted Answer · 2023-06-12 13:26:12Z

2

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

answered Jun 12, 2023 at 13:26

Ahsan Khan

3813 silver badges3 bronze badges

Comments

Anas Ghareib · Accepted Answer · 2023-06-12 13:02:36Z

-1

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

answered Jun 12, 2023 at 13:02

Anas Ghareib

231 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related