Next.js Discord

Discord Forum

How to conditionally render segments without using `useSelectedLayoutSegment`?

Unanswered
Mugger Crocodile posted this in #help-forum
Open in Discord
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>
    </>
  )
}

0 Replies