Question 191813 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Error accessing query parameter with useRouter in Next.js

I’m facing an issue while trying to access query parameters in Next.js 13 using the useRouter hook. When I run the following code

'use client'
import { useRouter } from 'next/navigation';


const Post = () => {
    const router = useRouter();  
    
    return (
        <div>
            post number : {router.query.id}
        </div>

  )
}

export default Post

I receive the following error:

Unhandled Runtime Error

TypeError: router.query is undefined

Source

  25 |   return (
  26 |       <div>
> 27 |           post number : {router.query.id}
     |                         ^
  28 |       </div>
  29 | 
  30 | )

i take the code from the official website Routing:Dynamic Routes,

you can look here

i log it in the console to see what inside the variable router, i get this this

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i got the answer that it worked for me (getting URL params)

    I encountered the issue while trying to access query parameters using the useRouter hook from next/router inside the app directory in Next.js. After referring to the Next.js documentation

    This can also happen when you try to use the useRouter hook from next/router inside the app directory, as the App Router's useRouter from next/navigation has different behavior to the useRouter hook in pages.

    To resolve this issue, you can make use of the useParams hook from the next/navigation package. This hook provides a solution for getting URL params , without relying on useRouter.

    Here's an example of the modified code that successfully access query parameters:

    'use client'
import { useParams } from 'next/navigation';

const Post = () => {
  const { id } = useParams();

  return (
    <div>
      Post number: {id}
    </div>
  );
}

export default Post;

    By using useParams, you can directly destructure the id parameter from the route and utilize it within your component.

    Keep in mind that the example code assumes you are using the latest version of Next.js (v13.4.6).


  2. 0

    The error you are getting is because the router.query object is not ready yet when the component first renders. This is because Next.js pre-renders pages on the server, and the query parameters are not available at that time.

    To fix this, you can use the useEffect hook to wait until the router is ready before accessing the query parameters.

    See the below code:

    import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();

  useEffect(() => {
    if (router.isReady) {
      const id = router.query.id;

      // write whatever you want

    }
  }, [router.isReady]);

  return (
    <div>
      Post number: {router.query.id}
    </div>
  );
};

export default Post;

    After fixing that, your code should work.I am giving the docs reference here:

    isReady: boolean – Whether the router fields are updated client-side
    and ready for use. Should only be used inside of useEffect methods and
    not for conditionally rendering on the server.
    https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search