div是否有可能像HTML锚标签一样工作？

Question

I'd like a way to have a block-level HTML tag act like an <a> tag.

I've been using React and React-Router for a while now and tend to use <div> for a lot of components. Because I wrapping an anchor tag in a block-level tag such as <div> isn't valid HTML, I can't add browser-known links in my apps.

One idea I had is to write all my components as a <span> . Sadly, this isn't the solution I want since I also don't control the HTML 3rd party components.

How would I make it so a div or any other block-level tag, act like an anchor tag where hovering shows a link in the bottom of the browser, [CTRL][LEFT_CLICK] and [MIDDLE_CLICK] open a new tab, and a single click changes the route?

A React solution isn't required.

Answer 1

I would suggest two ways of doing it

Use little JavaScript

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

Make <a> act like a div

a {
    display: block;
}

You can set other stuff say height and width.

Hope this helps.

Answer 2

You should be using <a> instead of <div> if those requirements are necessary.

While this wasn't the case in the past, HTML5 allows you to wrap anchor tags around block-level elements: https://stackoverflow.com/a/1828032/1624862

There are still limitations though. If you wrap your <a> in a <span> , then you have to have inline elements inside. Block-level elements are only allowed inside <a> when it's also wrapped in a block-level element.

Answer 3

You can't wrap anchor tag around div but can do vice versa won't that help.

Link

Please take a look at below code sandbox link. https://codesandbox.io/s/9z5y52mk8w