Get pathname in server component
Answered
AM posted this in #help-forum
AMOP
I need to apply dynamic styles based on the current pathname and i'm using pathname() to obtain current route but is any way to do it in a server component, how to obtain the pathname there?
Answered by joulev
It’s fundamentally not possible. Use a client component with useParams/usePathname for this case
12 Replies
Show some code
AMOP
type HeaderNavigationProps = {
params: any;
};
export default function HeaderNavigation({ params }: HeaderNavigationProps) {
console.log(params);
return (
<header className="fixed md:static max-h-[100px] top-0 z-50 w-full flex items-center justify-between px-4 py-6 bg-neutral-950 md:bg-transparent">
<TopFramesXYZ />
<Link href={APP_LINKS.SETTINGS} className="md:hidden">
<Image src="/settings_icon.svg" alt="settings" width={24} height={24} />
</Link>
</header>
);
}this is located in app.layout.tsx is it possible that to the reason
<body className={inter.className}>
<div className="h-screen grid grid-rows-[auto_1fr_auto]">
<HeaderNavigation />
<div>{children}</div>
<FooterNavigation />
<AppBackground />
<Modal />
<MoonPayIframe />
</div>
</body>HeaderNavigation
@AM
type HeaderNavigationProps = {
params: any;
};
export default function HeaderNavigation({ params }: HeaderNavigationProps) {
console.log(params);
return (
<header className="fixed md:static max-h-[100px] top-0 z-50 w-full flex items-center justify-between px-4 py-6 bg-neutral-950 md:bg-transparent">
<TopFramesXYZ />
<Link href={APP_LINKS.SETTINGS} className="md:hidden">
<Image src="/settings_icon.svg" alt="settings" width={24} height={24} />
</Link>
</header>
);
}
this is located in app.layout.tsx is it possible that to the reason
Inside layout then no it’s not possible. For more info read the link above
It’s fundamentally not possible. Use a client component with useParams/usePathname for this case
Answer
AMOP
i see yes, all was coming down to prefetch but i guess will go with router.prefetch
American
const pathname = usePathname()