Nextjs Next/router

1

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

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

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

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
4

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.

5

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

6

Thank You for providing the solution. @bappyasif

1 Like
7

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

1 Like