next.js: Dynamic routes react router returns undefined

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Binaries: Node: 18.12.1 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 13.1.1 eslint-config-next: 13.1.1 react: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/vercel/next.js/blob/canary/examples/dynamic-routing/pages/post/[id]/[comment].tsx

To Reproduce

I tried to use this example from the official docs: https://nextjs.org/docs/routing/dynamic-routes using the path as follows: pages/post/[slug].js and want to access the slug value on the page

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  console.log(router.query.slug)
  return (
    <>
     ... omitted for brevity
    </>
  )
}

Describe the Bug

and got ‘undefined’ instead of slug value

Expected Behavior

should get the slug value as described in the documentaion

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 17 (8 by maintainers)

Most upvoted comments

Faced same issue, currently I have tried a work around, using getServerSideProps,

export const getServerSideProps = async ({ query }: any) => {
  return {
    props: {
      handle: query.handle
    }
  };
};

techstaunch-solutions on Jun 15, 2023