{"id":410,"hash":"39cfdbd2d3e87544ff275e6fb38a194ec5922629074cd38556eb8ebef6a19d96","pattern":"useRouter/withRouter receive undefined on query in first render","full_message":"I got a problem with my dynamic route. It look like this \n\n[lang]/abc\n\nI am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on first i got query.lang = undefined ). its possible to get in 1 render or use any technique ?","ecosystem":"npm","package_name":"next.js","package_version":null,"solution":"It's impossible to get the query value during the initial render.\n\nStatically optimized pages are hydrated without the route parameters, so the query is an empty object ({}).\n\nNext.js will populate the query after the page has been hydrated.\n\nNext.js 10.0.5 and up\nTo determine if the route params are ready, you can use router.isReady inside a useEffect hook. For an example, see the answer provided by @doxylee.\n\nBefore Next.js 10.0.5\nAt first render of a dynamic route router.asPath and router.route are equal. Once query object is available, router.asPath reflects it.\n\nYou can rely on the query value within a useEffect hook after asPath has been changed.\n\nconst router = useRouter();\n\nuseEffect(() => {\n  if (router.asPath !== router.route) {\n    // router.query.lang is defined\n  }\n}, [router])\n\nGitHub Issue - Add a \"ready\" to Router returned by \"useRouter\"","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/61040790/userouter-withrouter-receive-undefined-on-query-in-first-render","votes":93,"created_at":"2026-04-19T04:51:06.841629+00:00","updated_at":"2026-04-19T04:51:06.841629+00:00"}