Dynamic routing in Next.js
Unanswered
Ocicat posted this in #help-forum
OcicatOP
Hello. I am doing dynamic routing for the first time and have problem with parameter being undefined.
My path is /pages/discussion/[id].tsx, I enter url /pages/discussion/1 for example and this is my code
What am I doing wrong?
My path is /pages/discussion/[id].tsx, I enter url /pages/discussion/1 for example and this is my code
const router = useRouter();
const {id} = router.query
What am I doing wrong?
3 Replies
Based on the docs (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes), you can access query params in page function arguments like this (when using App Router):
export default function Page({ params }) {
return <div>{params.id}</div>
}
If using Pages Router (https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes), it should work like this:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>{router.query.id}</p>
}
Note that
/pages/discussion/[id].tsx
is the route, but the page you visit should be /discussion/1