Nextjs Next/router

[kalwarsushil2]

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.

GitHub - iprime2/twitter-clone-nextjs-ts

'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} />
      </div>
    )
  }

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

export default UserView

[bappyasif]

@kalwarsushil2

const {userId} = router.query

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

[lasjorg]

The pages and app version is not the same.

Functions: useRouter | Next.js

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

[kalwarsushil2]

It says next/router is not mounted.
http://localhost:3000/users/6464951cdbe1083281cb003e

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.

[bappyasif]

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

• for more info look into “shallow routing”,
• or have a dynamic route handling pages with “/[userId].js” “http://localhost:3000/users/6464951cdbe1083281cb003e”
  hope this helps, happy learning

[kalwarsushil2]

Thank You for providing the solution. @bappyasif

[bappyasif]

no problem, glad i could help, happy learning