Currently, I am facing a challenge in updating the page title within a nested layout structure.
app/docs/layout.tsx:
export const DocsLayout = ({children}:{children: React.ReactNode}) => {
return (
<>
<header>
<h2>Documentation - {/* platform goes here */}</h2>
</header>
<div>{children}</div>
</>
)
}
app/docs/linux/page.tsx:
export const Linux = () => {
const PAGE_TITLE = "Linux";
return (
<div>Linux content</div>
)
}
app/docs/macos/page.tsx:
export const MacOs = () => {
const PAGE_TITLE = "MacOS";
return (
<div>MacOS content</div>
)
}
I am struggling to find a proper method to pass the PAGE_TITLE from sub pages to the header in layout.tsx. Currently, I am resorting to checking the URL pathname of each page and updating the h2 element accordingly.
app/docs/layout.tsx:
export const DocsLayout = ({children}:{children: React.ReactNode}) => {
const pathname = usePathname();
const [platform, setPlatform] = useState("Linux");
if (pathname === "/docs/linux") {
setPlatform("Linux");
}
else if (pathname === "/docs/macos") {
setPlatform("MacOS");
}
return (
<>
<header>
<h2>Documentation - {platform}</h2>
</header>
<div>{children}</div>
</>
)
}
I understand that this is not the most efficient approach. I would greatly appreciate it if someone could guide me on how to resolve this using the correct methodology.