0

Is it possible to access the current selected layout segment from a component placed inside a root layout?

i.e.

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>
        <NavMenu session={session} />
        <GlobalHero /> {/* <- This is where I want to access the current route */}
        {children}
      </body>
    </html>
  );
}

// importing this causes a runtime error 
// Error: Cannot read properties of null (reading 'useContext')
import { useSelectedLayoutSegment } from "next/navigation" 


export default function GlobalHero() {


  return ( <div> .... </div>)

}
Ryan Roberts
  • 318
  • 1
  • 4
  • 12
  • 1
    If I'm not mistaken, the component in which this hook is used can only be used inside a `layout` file and it must be specified as a client component using `'use client'`. – ivanatias Nov 28 '22 at 20:52

0 Answers0