How to conditionally render segments without using `useSelectedLayoutSegment`?
Unanswered
Mugger Crocodile posted this in #help-forum
Mugger CrocodileOP
I'd like to keep my layout.tsx server side component and I can't find a way to conditionally render segment to do this:
export default function Layout({ segmentA, segmentB, segmentC, segmentD }: LayoutProps) {
const dSegment = useSelectedLayoutSegment("mysegment-d") // I don't want to make my component client side with 'use client'
if (dSegment) {
return segmentD
}
return (
<>
<PageContainer>
<PageHeader>{segmentA}</PageHeader>
</PageContainer>
<div className="border-b" />
<PageContainer className={"py-4"}>
<Tabs defaultValue="overview" className="space-y-4">
<TabsList>
<TabsTrigger value="overview">B</TabsTrigger>
<TabsTrigger value="scans">C</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-4">
{segmentB}
</TabsContent>
<TabsContent value="scans" className="space-y-4">
{segmentC}
</TabsContent>
</Tabs>
</PageContainer>
</>
)
}