App continually throwing 404 with dynamic routing?
Answered
xolotl posted this in #help-forum
xolotlOP
Hi all,
I'm new to Next.js and am trying to try my hand at dynamic routing, specifically rendering details from a list. Despite following the dynamic detailing section to what I thought was a 'T', every time I navigate try to navigate to different list items, I am being given a 404.
My app exists inside of src/app along with 2 others. It is google_forms_viewer. Going to http://localhost:3000/google_forms_viewer will take you to the page.js successfully. However, clicking on any of the test items throws a 404.
Attached is a picture of the central directory and the main landing page.js, the google_forms_viewer app directory, and the code for page.js and [id].js
I've tried restructuring my app, but have continually been given other routing errors by doing so. I have tried nesting and unnesting the slug/[id]. I have tried changing the link names in the <Link href=> multiple times. None of these have produced any useful results.
I'm not sure what I'm doing wrong or if I need to restructure my app in any way. Thank you in advance.
I'm new to Next.js and am trying to try my hand at dynamic routing, specifically rendering details from a list. Despite following the dynamic detailing section to what I thought was a 'T', every time I navigate try to navigate to different list items, I am being given a 404.
My app exists inside of src/app along with 2 others. It is google_forms_viewer. Going to http://localhost:3000/google_forms_viewer will take you to the page.js successfully. However, clicking on any of the test items throws a 404.
Attached is a picture of the central directory and the main landing page.js, the google_forms_viewer app directory, and the code for page.js and [id].js
I've tried restructuring my app, but have continually been given other routing errors by doing so. I have tried nesting and unnesting the slug/[id]. I have tried changing the link names in the <Link href=> multiple times. None of these have produced any useful results.
I'm not sure what I'm doing wrong or if I need to restructure my app in any way. Thank you in advance.
Answered by Rafael Almeida
since you are using the new App Router the file conventions are different. all pages in the app router follow the same
page.js naming, so for dynamic routes you need to do src/app/google_forms_viewer/[slug]/page.js. https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes5 Replies
@xolotl Hi all,
I'm new to Next.js and am trying to try my hand at dynamic routing, specifically rendering details from a list. Despite following the dynamic detailing section to what I thought was a 'T', every time I navigate try to navigate to different list items, I am being given a 404.
My app exists inside of src/app along with 2 others. It is google_forms_viewer. Going to http://localhost:3000/google_forms_viewer will take you to the page.js successfully. However, clicking on any of the test items throws a 404.
Attached is a picture of the central directory and the main landing page.js, the google_forms_viewer app directory, and the code for page.js and [id].js
I've tried restructuring my app, but have continually been given other routing errors by doing so. I have tried nesting and unnesting the slug/[id]. I have tried changing the link names in the <Link href=> multiple times. None of these have produced any useful results.
I'm not sure what I'm doing wrong or if I need to restructure my app in any way. Thank you in advance.
since you are using the new App Router the file conventions are different. all pages in the app router follow the same
page.js naming, so for dynamic routes you need to do src/app/google_forms_viewer/[slug]/page.js. https://nextjs.org/docs/app/building-your-application/routing/dynamic-routesAnswer
@Rafael Almeida since you are using the new App Router the file conventions are different. all pages in the app router follow the same `page.js` naming, so for dynamic routes you need to do `src/app/google_forms_viewer/[slug]/page.js`. <https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes>
xolotlOP
I think I understand, so I would need to make a new subdirectory named [slug] and then inside page.js for the details page?
yeah, that would be the equivalent to the
localhost:3000/google_forms_viewer/foo path@Rafael Almeida yeah, that would be the equivalent to the `localhost:3000/google_forms_viewer/foo` path
xolotlOP
Thanks so much! Do you happen to know why it may not be passing the object down with the link to the details page? I restructured things and it will console.log the first map but I'm not sure how to get useRouter() on ProductDetails to have it receive the obj.
@xolotl Thanks so much! Do you happen to know why it may not be passing the object down with the link to the details page? I restructured things and it will console.log the first map but I'm not sure how to get useRouter() on ProductDetails to have it receive the obj.
router.query is not a thing in the app router, it has been removed and replaced by useSearchParams for client components. if all you want to do is to get the [id] from the URL you can read it from the props of the page component, there is an example in the docs page I linked before: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example