<Link> gives unstyled <a> without href attribute

[aspiers]

When hovering over links generated using react-scroll's <Link>, I noticed that my mouse pointer didn't change to the expected hand+forefinger icon. This styling is determined by the user agent stylesheet built into the browser, e.g. for Chrome:

a:-webkit-any-link {
    cursor: pointer;
}

and for Firefox:

*|*:any-link {
  cursor: pointer;
}

It took me ages to realise that this styling only applies when the <a> element has an href attribute present, and <Link> doesn't provide an href attribute to its <a> element by default. Fortunately this is easy to fix just by adding href="#" or similar to <Link>. However since I wasted literally hours figuring this out, it would be good if it was documented so that others don't have to go through the same struggle.

[eballeste]

or applying cursor: pointer to the links class css

[iljapanic]

Just ran into this issue myself. Thank you for the clarification @aspiers, adding href attribute to <Link> works like a charm.

Applying cursor: pointer doesn't seem like a very semantic fix.

[eballeste]

this is not a react-scroll issue guys, you will get the same exact behavior by using anchor tags without a href attribute, the only way to see the very visual pointer cursor is by either

• using your approach of including a href attribute with the hashtag, which then means you have to implement preventDefault if you want to avoid getting the hashtag in the url

or

• you can add it via css using cursor:pointer

or

• including a href with no value and returning false on the onClick event

not sure what you were expecting but I feel like this doesn't have to be in react-scroll documentation, this is basic html knowledge

[aspiers]

Ah OK, thanks for the clarification @eballeste.