3 ms·
It gets called on all clicks (line 1, it’s a window-level click handler), then finds the link the click target is inside (line 2), and does nothing if it wasn’t
by chrismorgan 5y ago
It gets called on all clicks (line 1, it’s a window-level click handler), then finds the link the click target is inside (line 2), and does nothing if it wasn’t inside a link (line 9).
(You might think that it should use .closest("a[href]") instead of .closest("a"), since a:not([href]) is not a link, but in that case, link.href === "", and so it fails the line 10 is-it-eligible-for-client-side-routing test. Note also that except for the “no href attribute” case, HTMLAnchorElement#href gives a full resolved URL, so <a href=""> will produce the document base URL.)
Fundamentally, there’s no such thing as an event handler that triggers only on links—you instead have to use a global event handler that starts by checking whether it’s being triggered on a link.
- ReactNative22 5y agoThanks Chris, you are awesome - this is definitely a much better approach since it gets rid of an additional Link Component
- chrismorgan 5y agoI do think, though, that woojoo666’s comment and my response are worth bearing in mind. In this specific situation, I think <Link> is not warranted and mildly better avoided; but in a similar situation where global behaviour wasn’t already forced, I would say to keep the separate component, rather than breaking behavioural encapsulation.
- ReactNative22 5y agoThank you, I agree