useLink для ссылок

useLink — это хук из библиотеки React Aria, предназначенный для обеспечения доступности интерактивных элементов, выполняющих роль ссылок. Он помогает правильно обрабатывать клавиатурные и мышиные события, поддерживать фокус и соответствовать стандартам ARIA без необходимости вручную прописывать атрибуты role, tabIndex или обработчики событий.

Основной синтаксис

import { useLink } from '@react-aria/link';
import { useRef } from 'react';

function MyLink(props) {
  let ref = useRef();
  let { linkProps } = useLink(props, ref);

  return {props.children};
}
  • props — объект с параметрами ссылки, такими как href, isDisabled и onPress.
  • ref — React ref, который связывается с DOM-элементом для правильного управления фокусом и событиями.
  • linkProps — объект с заранее настроенными атрибутами и обработчиками событий, которые нужно распространять на элемент или на кастомный компонент.

Основные свойства и параметры

  1. href Строка с адресом ссылки. Используется для навигации. Если href не указан, useLink автоматически обрабатывает элемент как интерактивный без перехода по URL.

  2. isDisabled Булевое значение. Если true, ссылка становится недоступной для взаимодействия, а атрибуты aria-disabled и обработка событий корректно блокируются.

  3. onPress Функция обратного вызова, вызываемая при активации ссылки через клик мыши, Enter или пробел. Позволяет реализовать кастомное поведение вместо стандартной навигации.

  4. elementType Позволяет указать тип рендеримого элемента, если необходимо использовать не , а, например,

Обработка событий и фокуса

useLink автоматически управляет:

  • Keyboard navigation: активация с клавиш Enter и пробелом.
  • Focus management: добавление атрибута tabIndex и правильная обработка событий фокуса.
  • ARIA attributes: установка role="link" и aria-disabled, если ссылка недоступна.

Пример кастомного компонента:

function CustomLink({ href, children }) {
  let ref = useRef();
  let { linkProps } = useLink({ href }, ref);

  return (
    

      {children}
    

  );
}

Даже если

не является стандартной ссылкой, useLink добавляет все необходимые атрибуты для корректной доступности.

Особенности использования с роутингом

Для SPA (Single Page Application) часто используют роутеры, такие как React Router. В таких случаях onPress позволяет перехватывать стандартное поведение и вызывать навигацию через роутер:

import { useNavigate } from 'react-router-dom';

function RouterLink({ to, children }) {
  let navigate = useNavigate();
  let ref = useRef();
  let { linkProps } = useLink({
    onPress: () => navigate(to)
  }, ref);

  return {children};
}

Это сохраняет доступность и корректную работу клавиатурного управления без лишних костылей.

Советы по доступности

  • Использовать isDisabled вместо ручного управления pointer-events или opacity.
  • Не переопределять role и tabIndex на уровне DOM, если применён useLink — это может нарушить стандарт ARIA.
  • Для кастомных компонентов всегда передавать ref, иначе фокус и клавиатурная навигация будут работать некорректно.
  • Комбинировать с useFocusRing для визуального выделения фокуса, улучшая восприятие пользователями с ограниченными возможностями.

Взаимодействие с другими хуками React Aria

  • useFocusRing — для отображения состояния фокуса на ссылках.
  • useHover — для управления состоянием наведения, сохраняя ARIA-семантику.
  • usePress — базовый хук для обработки кликов и нажатий, на котором построен useLink.

Примеры продвинутого применения

  1. Ссылка с иконкой и текстом
function IconLink({ href, icon, children }) {
  let ref = useRef();
  let { linkProps } = useLink({ href }, ref);

  return (
    
      {icon}
      {children}
    
  );
}
  1. Ссылка, отключаемая по условию
function ConditionalLink({ href, isAvailable, children }) {
  let ref = useRef();
  let { linkProps } = useLink({ href, isDisabled: !isAvailable }, ref);

  return {children};
}

Ключевые моменты

  • useLink гарантирует корректную доступность ссылок независимо от используемого HTML-элемента.
  • Поддерживает клавиатурную навигацию, ARIA-атрибуты и состояние фокуса.
  • Легко интегрируется с SPA-роутерами и кастомными компонентами.
  • Является базовым строительным блоком для сложных UI, где ссылки должны быть интерактивными и доступными.
Оглавление