app router dynamic parallel routes, is it possible?
Unanswered
Farreres posted this in #help-forum
FarreresOP
Greetings, I find myself in need of adding parameters to a component in app router using parallel route, and I cannot find in the docs or on the internet how to do it.
I want to have this folder structure
/app
|- @component
|- [id]
I know I can import the component this way:
const Layout: NextPage = ({
children,
component,
}: Readonly<{
children: React.ReactNode;
component: React.ReactNode;
}>) => {
and then later use it in the return this way:
return {component}
but I need to add an id parameter to the component, and I don't know how can this be achieved.
Any hint?
I want to have this folder structure
/app
|- @component
|- [id]
I know I can import the component this way:
const Layout: NextPage = ({
children,
component,
}: Readonly<{
children: React.ReactNode;
component: React.ReactNode;
}>) => {
and then later use it in the return this way:
return {component}
but I need to add an id parameter to the component, and I don't know how can this be achieved.
Any hint?
1 Reply
FarreresOP
I found a way but not using parallel routes, just importing component:
import component from "./@component/[id]/page";
{list.map((item) => (
<component key={item.id} nft={item} />
))}
This reminds me to a solution more similar to pages router than app router, but finally it works
import component from "./@component/[id]/page";
{list.map((item) => (
<component key={item.id} nft={item} />
))}
This reminds me to a solution more similar to pages router than app router, but finally it works