I want to make my parallel route dynamic? can i do that?
Unanswered
Dutch Smoushond posted this in #help-forum
Dutch SmoushondOP
@[parallelRoute]
4 Replies
@Dutch Smoushond @[parallelRoute]
no, not possible.
any reason you want to do this?
any reason you want to do this?
Dutch SmoushondOP
just exploring the framework
/[service]
/[sid]
/[...id] (here i put condition to check parameter count and display the respective details accordingly)
/@adya
/[h]
/@honey
/@parallelp
1. i want to conditionally open the parallel route
but when i put parallel route in page.tsx of [...id] it is not working
with layout it is working but button get attached to every route that comes under [...id]
2. right now the parallel routes are static , i want to render dynamic data in there how to do that?
in layout code i put conditions to display the parallel routes like this
'use client';
import { ReactNode, useState } from 'react';
export default function Id({
children,
honey,
parallelp,
adya,
}: {
children: ReactNode;
honey: ReactNode;
parallelp: ReactNode;
adya: ReactNode;
}) {
const [showContent, setShowContent] = useState(false);
const handleClick = () => {
setShowContent(true);
};
return (
<div className="flex h-screen">
<div className={
<div>{children}</div>
<button
className="px-4 py-2 bg-blue-700 text-white rounded-md shadow-md hover:bg-blue-600 mb-4"
onClick={handleClick}
>
CLICK
</button>
</div>
{showContent && (
<div className="w-1/2 p-4 border-l border-gray-300 transition-all duration-500">
<div className="mt-4">
<div>{honey}</div>
<div>{adya}</div>
<div>{parallelp}</div>
</div>
</div>
)}
</div>
);
}
/[service]
/[sid]
/[...id] (here i put condition to check parameter count and display the respective details accordingly)
/@adya
/[h]
/@honey
/@parallelp
1. i want to conditionally open the parallel route
but when i put parallel route in page.tsx of [...id] it is not working
with layout it is working but button get attached to every route that comes under [...id]
2. right now the parallel routes are static , i want to render dynamic data in there how to do that?
in layout code i put conditions to display the parallel routes like this
'use client';
import { ReactNode, useState } from 'react';
export default function Id({
children,
honey,
parallelp,
adya,
}: {
children: ReactNode;
honey: ReactNode;
parallelp: ReactNode;
adya: ReactNode;
}) {
const [showContent, setShowContent] = useState(false);
const handleClick = () => {
setShowContent(true);
};
return (
<div className="flex h-screen">
<div className={
p-4 bg-red-100 transition-all duration-500 ${showContent ? 'w-1/2' : 'w-full'}}><div>{children}</div>
<button
className="px-4 py-2 bg-blue-700 text-white rounded-md shadow-md hover:bg-blue-600 mb-4"
onClick={handleClick}
>
CLICK
</button>
</div>
{showContent && (
<div className="w-1/2 p-4 border-l border-gray-300 transition-all duration-500">
<div className="mt-4">
<div>{honey}</div>
<div>{adya}</div>
<div>{parallelp}</div>
</div>
</div>
)}
</div>
);
}
sorry. i still have no idea what you are trying to achieve and what you are trying to do here.
Dutch SmoushondOP
i want to render 2 different page
example like working on google docs on the left and google excel on the right
example like working on google docs on the left and google excel on the right