params is missing slug is not coming inside layout
Unanswered
Giant Chinchilla posted this in #help-forum
Giant ChinchillaOP
export default function ShopLayout({
children,
params,
}: {
children: React.ReactNode
params: {
id: string
}
}) {
console.log(params)
return <InboxLayout>{children}</InboxLayout>
}
children,
params,
}: {
children: React.ReactNode
params: {
id: string
}
}) {
console.log(params)
return <InboxLayout>{children}</InboxLayout>
}
12 Replies
and what is the pathname of that file?
@Alfonsus Ardani what does `console.log("Params:", params)` says?
Giant ChinchillaOP
it returning empty object and pathname of file is http://localhost:3000/inbox/67572500af76e13824983888
slug id 67572500af76e13824983888 is missing in props..
@Giant Chinchilla it returning empty object and pathname of file is http://localhost:3000/inbox/67572500af76e13824983888
thats the URL, i want to know the pathname of the file
Giant ChinchillaOP
@Alfonsus Ardani apps/web/src/app/(dashboard)/(app)/inbox/layout.tsx
i see the problem now
you can't get the params that is on the child path segment
if you want to do that, check out parallel routes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Giant ChinchillaOP
tried but able to solve with const { id } = useParams(); but still i want to know why it not autopass ?
@Giant Chinchilla tried but able to solve with const { id } = useParams(); but still i want to know why it not autopass ?
because layout can't see the params of child segment
either you detect with useparams or use parallel routes