Реакция - Как управлять внешней ссылкой - какое решение лучше

Question

У меня есть компонент React, который отображает продукт с тремя ссылками.Ссылки на мой продукт перенаправляются на внутреннюю ссылку под реагирующим маршрутизатором, но для одного продукта я хочу перенаправить на внешнюю ссылку.Как правильно управлять внешней ссылкой?

Пока у меня есть два решения, и я не знаю, какое из них лучше?

Вот то, что мой реагирующий компонент Product рендерит:

<article>
    <header>
        <Link className={s.link} to={link}>
        {cardImage}
        </Link>
    </header>
    <div>
        <h2>
            <Link to={link}>
            {title}
            </Link>
        </h2>
        <div>
            <Link to={link}>
            Shop Now
            </Link>
        </div>
    </div>
</article>

Вот мои два решения:

Решение 1:

Создание компонента LinkDuo

const propTypes = {
    to: PropTypes.string.isRequired,
};

/**
 * Link that also works for external URL's
 */
export const LinkDuo = (props) => {
    return isExternal(props.to) ?
        <a href={props.to} {...props}/> // eslint-disable-line jsx-a11y/anchor-has-content
        :
        <Link {...props} />;
};

LinkDuo.propTypes = propTypes;

и замените Link на LinkDuo

<article>
    <header>
        <LinkDuo className={s.link} to={link}>
        {cardImage}
        </LinkDuo>
    </header>
    <div>
        <h2>
            <LinkDuo to={link}>
            {title}
            </LinkDuo>
        </h2>
        <div>
            <LinkDuo to={link}>
            Shop Now
            </LinkDuo>
        </div>
    </div>
</article>

Решение 2:

const isExternal = !!link.match(/^http/);

<article>
    <header>
        {isExternal ?
            <a href={link} className={s.link}>{cardImage}</a>
            :
            <Link className={s.link} to={link}>
            {cardImage}
            </Link>
        }
    </header>
    <div>
        <h2>
            {isExternal ?
                <a href={link} className={s.link}>{cardImage}</a>
                :
                <Link to={link}>
                {title}
                </Link>
        }
        </h2>
        <div>
            {isExternal ?
                <a href={link} className={s.link}>{cardImage}</a>
                :
                <Link to={link}>
                Shop Now
                </Link>
            }
        </div>
    </div>
</article>

Какое из них является лучшим решением с точки зрения повторного использования, удобства обслуживания, тестируемости?