How to make link active in QWIK?

Question

How do I make a link active?

I used the link component in a QWIK framework:

 <Link href="/">Home</Link>

How do I set the CSS class if the link is active (after activated route)?

Are there any bind props like [class.active]="activeRoute"?

Answer 1

You can use useLocation hook from qwik to handle active route.

import { component$ } from "@builder.io/qwik";
import { Link, useLocation } from "@builder.io/qwik-city";

type Props = {
  name: string;
  activeIcon: any;
  href: string;
  icon: any;
};
export const MenuItem = component$<Props>((props) => {
  const { activeIcon: ActiveIcon, href, icon: Icon, name } = props;
  const location = useLocation();

  return (
    <li>
      <Link
        href={href}
        class={[
          "flex items-center gap-4",
          {
            active: location.url.pathname === href,
          },
        ]}
      >
        {location.url.pathname === href ? <ActiveIcon /> : <Icon />}
        <span class="text-lg">{name}</span>
      </Link>
    </li>
  );
});