This query pertains to the Server-Side components in Next.js 13 app router:
I have a good grasp on how the slug parameter is passed to the default function in app/blog/[slug]/page.tsx:
export default function Page({ params }: { params: { slug: string } }) {
return <div>My Post: {params.slug}</div>
}
If a deeply nested component is rendered, can an internal component access the URL's slug, similar to using the useRouter hook in client-side components?
For instance, if my structure in app/blog/[slug]/page.tsx looks like this:
export default function Page({ params }: { params: { slug: string } }) {
return <MyPost/>
}
and MyPost is defined as follows:
function MyPost() {
return <div>This is the post: <PostText/></div>
}
is there a way for PostText to access the slug without requiring me to pass it down through all the nested components?