Возможно ли для div'а действовать как якорный тег HTML?

Question

Мне бы хотелось, чтобы тег HTML уровня блока действовал как тег <a>.

Я уже некоторое время использую React и React-Router и склонен использовать <div> для многих компонентов.Поскольку я оборачиваю тег привязки в тег уровня блока, такой как <div>, не является допустимым HTML, я не могу добавить ссылки, известные браузеру, в свои приложения.

Одна идея, которая у меня была, - написать всемои компоненты как <span>.К сожалению, это не то решение, которое мне нужно, поскольку я также не контролирую сторонние компоненты HTML.

Как бы я сделал так, чтобы div или любой другой тег уровня блока действовал какякорный тег, где при наведении курсора отображается ссылка в нижней части браузера, [CTRL] [LEFT_CLICK] и [MIDDLE_CLICK] открывают новую вкладку, а один щелчок мыши меняет маршрут?

Решение React не требуется.

Answer 1

Вы должны использовать <a> вместо <div>, если эти требования необходимы.

Хотя это было не так в прошлом, HTML5 позволяет оборачивать теги привязки вокруг элементов уровня блока: https://stackoverflow.com/a/1828032/1624862

Однако все еще существуют ограничения.Если вы оберните свой <a> в <span>, то у вас должны быть встроенные элементы внутри.Элементы уровня блока допускаются только внутри <a>, если они также заключены в элемент уровня блока.

Answer 2

Вы не можете обернуть тег привязки вокруг div, но можете сделать наоборот, не поможет ли это.

Ссылка

Пожалуйста, посмотрите на ссылку ниже песочницы кода.https://codesandbox.io/s/9z5y52mk8w

Answer 3

Я бы предложил два способа сделать это

Использовать немного JavaScript

<div onclick="location.href='http://www.thelink.com';" style="cursor:pointer;"></div>

Сделать <a> вести себя какdiv

a {
    display: block;
}

Вы можете установить другие параметры, например, высоту и ширину.

Надеюсь, это поможет.