Использование forwardRef с компонентом Link

Question

Мне нужно использовать forwardRef для пересылки ссылки на дочерний компонент. Приведенное ниже работает нормально, но в идеале я бы не стал полагаться на элемент div для переноса ссылки, поскольку это делает стилизацию ссылки неловкой.

const RoleCard = forwardRef((props, innerRef) => {
    return (
        <div ref={innerRef} className="RoleCard" key={props.role.id}>
            <Link
                to={{
                    pathname: `roles/${props.role.slug}`
                }}
            >
                <div className="RoleCard__Inner">
                    <span className="RoleCard__Title">{props.role.title}</span>
                    <div className="RoleCard__Body">
                        {props.role.description}
                    </div>
                </div>
            </Link>
        </div>
    );
});

Однако нижеприведенное не работает, так как ссылка не пересылается (потому что ссылка на самом деле HOC?).

Можно ли пропустить innerRef по ссылке?

const RoleCard = forwardRef((props, innerRef) => {
    return (
        <Link
            ref={innerRef}
            className="RoleCard"
            key={props.role.id}>
            to={{
                pathname: `roles/${props.role.slug}`
            }}
        >
            <div className="RoleCard__Inner">
                <span className="RoleCard__Title">{props.role.title}</span>
                <div className="RoleCard__Body">
                    {props.role.description}
                </div>
            </div>
        </Link>
    );
});

Answer 1

Компонент Link имеет реквизит innerRef, который можно использовать для передачи ссылки на элемент, представленный компонентом.

const RoleCard = forwardRef((props, innerRef) => {
  return (
    <Link
      innerRef={innerRef}
      className="RoleCard"
      key={props.role.id}
      to={{
        pathname: `roles/${props.role.slug}`
      }}
    >
      <div className="RoleCard__Inner">
        <span className="RoleCard__Title">{props.role.title}</span>
        <div className="RoleCard__Body">{props.role.description}</div>
      </div>
    </Link>
  );
});