useRouter/withRouter receive undefined on query in first render

by

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]);

More Related Contents:

  1. How to add new pages without rebuilding an app with +150k static pages?
  2. NEXTJS: getServerSideProps not working into components
  3. Fresh NextJS App throwing errors before any changes
  4. Error: A required parameter (slug) was not provided as a string in getStaticPaths for /posts/[slug]
  5. How can I get (query string) parameters from the URL in Next.js?
  6. Dynamic Importing of an unknown component – NextJs
  7. Next.js SyntaxError “Unexpected token ‘export'”
  8. Parsing error : Cannot find module ‘next/babel’
  9. Error: Image Optimization using Next.js default loader is not compatible with `next export`
  10. Next/Image’s components are too slow to appear
  11. import Router from ‘next/router’ is it ok?
  12. For Next.js Dynamic Routes, it is possible to combine a string with a [slug]?
  13. Cannot find module or type declarations while it works in local build
  14. Next failed to load SWC binary
  15. Fetch error when building Next.js static website in production
  16. Internal API fetch with getServerSideProps? (Next.js)
  17. Next.js Redirect from / to another page
  18. Create a HOC (higher order component) for authentication in Next.js
  19. How to properly set environment variables in Next.js app deployed to Vercel?
  20. Next.js Global CSS cannot be imported from files other than your Custom
  21. Next.js: How to get static assets from within getStaticProps
  22. NextJS getStaticProps() never called
  23. How does the revalidate process in Incremental Static Regeneration work?
  24. How to hash CSS class names in Nextjs?
  25. What is the best way to have a fallback image in NextJS?
  26. How to use Image component in Next.js with unknown width and height
  27. Text Stroke (-webkit-text-stroke) css Problem
  28. How to avoid caching in the app directory of Next.js?
  29. How to access FastAPI backend from a different machine/IP on the same local network?
  30. How to handle login failed error in NextAuth.js?

Leave a Comment