How to get router.query value in useEffect hook.

[ashx404]

I need to call an api on the basis of some query values but I am only able to get params when I use router.query within useEffect and not getting any query params.

[brianlovin]

Are you doing static generation? If so query will always be empty at build time. See https://nextjs.org/docs/api-reference/next/router#router-object

[ashx404]

Can I get query in a normal page? if I create a page and do not use getStaticProps and getStaticPaths?

[brianlovin]

Yes, the query will be available when the client renders and rehydrates:

import { useRouter } from 'next/router'

export default function Component() {
  const router = useRouter()
  const { query } = router

  // do things
}

[ashx404]

Hey I changed to a class component because a functional component was not working, now I am trying to use withRouter, it asks for getInitialProps.
Also even in the functional component query was not accessible in the first render, even I wasn't able to access params.

[brianlovin]

If you can share some sample code, that would be great. getInitialProps has been deprecated so I'm not quite sure what the message is about :)

[IRediTOTO]

have same problem and here is my solution

const [initialValue,setInitialValue]=useState(null)
   useEffect(()=>{
      if(props.initialValue!=null){
         setInitialValue(props.initialValue)
      }
   },[props.initialValue])
   return (
      <Editor
         initialValue={initialValue?initialValue:""} />

[ashx404]

There is still no workaround on this?
I am not able to understand the reason, I am using useRouter inside my component and query results in an empty object but asPath contains it in URL encoded form.

[benwinding]

This worked well, I found around from this comment

Add useQuery.ts helper file

// useQuery.js
import { useRouter } from 'next/router';

// Resolves query or returns null
export default function useQuery() {
  const router = useRouter();
  const hasQueryParams =
    /\[.+\]/.test(router.route) || /\?./.test(router.asPath);
  const ready = !hasQueryParams || Object.keys(router.query).length > 0;
  if (!ready) return null;
  return router.query;
}

usage

// In your components (instead of useRouter)
const query = useQuery();

useEffect(() => {
  if (!query) {
    return;
  }
  console.log('my query exists!!', query);
}, [query]);

[cesarkohl]

I've found a solution. Surely, you can do it using Next.js' getStaticProps and getStaticPaths but it's a good practice to keep things closely tied to the JS core.

useEffect(() => {
    const last = window.location.href.split('/').pop();
}

If you want to get the last element outside the useEffect() call the useRouter():

const router = useRouter();
const { last } = router.query;

Since my project doesn't need additional pages being generated at build time this is enough. If this is not your case then it's probably better to use getStaticProps and getStaticPaths.

[esiebomaj]

for some reason this does not work for me

[doxylee]

I found something:

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/api-reference/next/router#router-object

And the code would be like:

const router = useRouter();
useEffect(()=>{
    if(!router.isReady) return;

    // codes using router.query

}, [router.isReady]);

[gitlango]

My Hero!

[FahimHassanMollah]

Thanks a lot.

[CarlosOV]

Thank you!!!

[lamlam-l]

lol its work like a champ

[SohailSayed]

Is there a good solution like this on NextJS 13? isReady got deprecated :(

[njungenjenga]

If you're yet to upgrade to v10.0.5 > this worked for me:

const router = useRouter();
  useEffect(() => {
    if (Object.keys(router.query).length > 0) {
        // code using router.query
    }
  }, [router.query]);

[robertseghedi]

If you're yet to upgrade to v10.0.5 > this worked for me:

const router = useRouter();
  useEffect(() => {
    if (Object.keys(router.query).length > 0) {
        // code using router.query
    }
  }, [router.query]);

Worked for me too.

[SohailSayed]

Anyone got a working solution for NextJS 13??

[BennyG93]

I think you could use the example in the official docs.

According to the docs: The query object has been removed and is replaced by useSearchParams()

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
[...]

  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
  }, [pathname, searchParams])

[...]