Компонент NavLink

Если вы хотите добавить активное состояние вашим ссылкам, вы можете использовать это решение. Компонент NavLink расширяет возможности компонента Qwik <Link>, добавляя в него:

Активный статус: Применяет класс, когда ссылка href совпадает с текущим именем URL.

Это позволяет стилизовать активное состояние навигации.

Как это работает

Под капотом NavLink использует хук useLocation для получения статуса навигации. Он проверяет, совпадает ли href ссылки с текущим URL, чтобы установить activeClass. Это позволяет NavLink автоматически определять активное состояние в зависимости от навигации.

import { Slot, component$ } from '@builder.io/qwik';
import { Link, useLocation, type LinkProps } from '@builder.io/qwik-city';
 
type NavLinkProps = LinkProps & { activeClass?: string };
 
export const NavLink = component$(
  ({ activeClass, ...props }: NavLinkProps) => {
    const location = useLocation();
    const toPathname = props.href ?? '';
    const locationPathname = location.url.pathname;
 
    const startSlashPosition =
      toPathname !== '/' && toPathname.startsWith('/')
        ? toPathname.length - 1
        : toPathname.length;
    const endSlashPosition =
      toPathname !== '/' && toPathname.endsWith('/')
        ? toPathname.length - 1
        : toPathname.length;
    const isActive =
      locationPathname === toPathname ||
      (locationPathname.endsWith(toPathname) &&
        (locationPathname.charAt(endSlashPosition) === '/' ||
          locationPathname.charAt(startSlashPosition) === '/'));
 
    return (
      <Link
        {...props}
        class={`${props.class || ''} ${isActive ? activeClass : ''}`}
      >
        <Slot />
      </Link>
    );
  }
);

Использование

Вы можете использовать NavLink с добавлением свойства activeClass:

import { component$ } from '@builder.io/qwik';
import { NavLink } from '..';
 
export default component$(() => {
  return (
    <>
      Ссылки
      <div>
        <NavLink href="/docs" activeClass="text-green-600">
          /docs
        </NavLink>
      </div>
      <div>
        <NavLink
          href="/demo/cookbook/nav-link/example/"
          activeClass="text-green-600"
        >
          /demo/cookbook/nav-link/example/
        </NavLink>
      </div>
    </>
  );
});

https://qwik-docs-ru.pages.dev/demo/cookbook/nav-link/example/

Tailwind

Если вы используете Tailwind CSS, обязательно отредактируйте файл конфигурации tailwind и добавьте important=true в экспорт, затем добавьте ! перед CSS-классами, где вы используете activeClass="!text-green-600", чтобы сделать их важными, когда ссылка активна.

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!