How to create a active Link for web using expo-router?

Question

I am learning expo router trying to use it in a web project. I am trying to style current active link in header Bar Menu. I am looking for something like <NavLink> in case of react-router but don't find something similar in expo-router docs.

<Link href={"/home"}>Home</Link>
<Link href={"/about"}>About</Link>
<Link href={"/product"}>Product</Link>

How to style the active link in case of expo-router particularly for web.

Answer 1

You can use the usePathname hook to get the current URL and compare it to the link's href

const NavLink = ({ href, styles, ...props }) => {
  const path = usePathname();

  return (
    <Link href={href} styles={styles({ isActive: href === path })} {...props} />
  );
}