Dynamic Routes
Answered
Alaska pollock posted this in #help-forum
Alaska pollockOP
How to Implement Dynamic Routes in next.js 14?
Code:
Error:
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
i've tried using next/navigation but there isnt a "query" property.
Code:
c++
// /app/[id]/check/page.tsx
"use client";
import { useRouter } from "next/router";
export default function Page() {
const router = useRouter();
console.log(router.query);
}Error:
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
i've tried using next/navigation but there isnt a "query" property.
Answered by B33fb0n3
you can access the dynamic part
@Alaska pollock
id in your case only serverside. So for example: create a page.js, get the dynamic part and fetch stuff, or route or whatever. Maybe even pass is down as prop to a client component. You can read more about dynamic routes here: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example@Alaska pollock
5 Replies
you can access the dynamic part
@Alaska pollock
id in your case only serverside. So for example: create a page.js, get the dynamic part and fetch stuff, or route or whatever. Maybe even pass is down as prop to a client component. You can read more about dynamic routes here: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example@Alaska pollock
Answer
@B33fb0n3 you can access the dynamic part id in your case only serverside. So for example: create a page.js, get the dynamic part and fetch stuff, or route or whatever. Maybe even pass is down as prop to a client component. You can read more about dynamic routes here: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example
<@1058070604227559606>
Alaska pollockOP
thanks, I've read the docs but did not lay an eye on this, Dont know how, However, Thanks!
what exactly are you missing? @Alaska pollock
You can ask anything in this chat
You can ask anything in this chat
@Alaska pollock How to Implement Dynamic Routes in next.js 14?
Code:
c++
// /app/[id]/check/page.tsx
"use client";
import { useRouter } from "next/router";
export default function Page() {
const router = useRouter();
console.log(router.query);
}
Error:
**Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted**
i've tried using next/navigation but there isnt a "query" property.
for app router, you should import
And the page component receive the params props
userRouter from next/navigation instead of next/router which is for page router.And the page component receive the params props
// app/blog/[slug]/page.tsx
export default function Page({
params,
searchParams,
}: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
return <h1>My Page</h1>
}so you don't need to use make the page component to client component and use
useRouter to get the params