Conditional render based on current route (in-line)

Question

What is the simplest and/or best way to conditionally render a Link based on the current route within a server side component?

In my initial Googling, I've seen using useRouter() and something like {router.pathname === "path" && ( //Link element ) but I am trying to figure out if there is a way to do this without forcing this component to be a client side component. Also most other suggestions I have found assume an entire component to be conditionally rendered, but I need this to be able to be done in-line.

Its a fairly basic navbar, however I want the Link on left side to only appear if the user is not on the home route (it is a back arrow icon that will return them to the home route),

I'm coming from Vue and Angular so I assume there is some common pattern similar to v-if or ng-if that will allow me to check the current route.

joulev · Answer

"use client";

export function BackButton() {
  const pathname = usePathname();
  if (pathname === "/") return null;
  return <Link />;
}Import it to your server component navbar

Conditional render based on current route (in-line)

2 Replies