Тег React Link мешает работе flex-box

Question

Я пытаюсь разрешить кнопке на моем сайте предоставить ссылку.Пока что это можно реализовать с помощью тега <link to "...">.

Однако мне также нужно, чтобы моя кнопка придерживалась нижней части столбца.Я завершил это в коде, однако, когда я вкладываю свою кнопку в теги <Link>, кнопка больше не торчит вниз.Поэтому тег <Link> останавливает работу кнопки.

<div className="col-12 col-lg-6 text-left">
    <div className="d-flex flex-column h-100">
        <Link to="/portfolio/website-designs#">
            <button type="button" className="btn-outline-primary mt-auto" style={{
                'pointer-events': 'none'
            }}>   <b> Button Text </b>
            </button>
        </Link>
    </div>

Если я удаляю <Link>, он работает.

Это потому, что mt-auto работает непосредственно народитель, тег ссылки?Я пытался вложить ссылку внутрь вокруг <b> Button Text </b>, но ссылка сейчас не работает.

Размещение кнопки ссылки сбоку, к сожалению, не дает работать ссылке.

т.е.

<button type="button" className="btn-lg btn-outline-primary mt-auto"<Link to"..."> <b> Learn More </b> </Link> </button>

Answer 1

Ссылка находится непосредственно под .d-flex, поэтому она растягивается на 100% как элемент flexbox. Когда вы удаляете Link, Button переходит под flexbox и растягивается на 100% ... но если вы поместите кнопку под Link ... Link растягивает, но кнопка не делает (так как она не находится непосредственно под flexbox). Вы можете добавить класс w-100 в свою кнопку, чтобы она растянулась

Answer 2

Вы можете передать className компоненту Link:

<Link to="/portfolio/website-designs#" className="btn-outline-primary mt-auto">
  Button Text
</Link>

Это позволит вашему mt-class, который, как я предполагаю, контролирует ваш макет, вести себя так, как вы ожидаете.

Подробнее о <Link /> можно прочитать здесь: https://reacttraining.com/react-router/web/api/Link/others

---

Важным примечанием является то, что ваша текущая разметка приведет к появлению кнопки в теге привязки, которая не является допустимым html и может вызвать проблемы с доступностью.

Это очень хорошо объяснено здесь: Могу ли я вложить элемент в с использованием HTML5?

Answer 3

Бросьте тег Link внутри тега кнопки.Я полагаю, что это решит вашу проблему.