Nextjs Next/router

I was unable to get params data from router.query in this I am using next-router please go through my code and help me and repo link below.

'use client'

import Header from '@/components/layout/Header'
import useUser from '@/hooks/useUser'
import useUsers from '@/hooks/useUsers'
import { useRouter } from 'next/router'
import { ClipLoader } from 'react-spinners'
import mockRouter from 'next-router-mock'

const UserView = () => {
  const router = useRouter()
  const {userId} = router.query

  const { data: fetchedUser, isLoading } = useUsers(userId as string)

  if (isLoading || !fetchedUser) {
    return (
      <div className='flex justify-center items-center h-full'>
        <ClipLoader color='lightblue' size={80} />

  return (
      <Header showBackArrow label='User Profile' />

export default UserView
  • how does your “url” looks like when you “get to this component”? does it show up “query” compatible url in it?

The pages and app version is not the same.

Migrating from the pages directory:

  • The new useRouter hook should be imported from next/navigation and not next/router
  • The pathname string has been removed and is replaced by usePathname()
  • The query object has been removed and is replaced by useSearchParams()
1 Like

It says next/router is not mounted.

In this url I want to extract “6464951cdbe1083281cb003e” which userId of user and it changes dynamically .
As In new Nextjs the next/router no longer supported.
So can you can tell me how can I do that by using next/navigation library.

then make your url looks like this “http://localhost:3000/users?id=6464951cdbe1083281cb003e” then you will see that “query” showing up

Thank You for providing the solution. @bappyasif

1 Like

no problem, glad i could help, happy learning :slight_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.