1

Say I am on my React app at http://mysite/. Then I either

(A) Click to navigate to https://mysite/#/myroute
(B) click on a browser bookmark to https://mysite/#/myroute

Can the client-side JavaScript route i.e. MyRoute know whether the navigation was via a browser bookmark vs clicking on some link?

copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • I think this is solved your problem https://stackoverflow.com/questions/51826167/determine-if-a-request-was-via-a-browser-bookmark-favorite-vs-a-link – Ali Ehyaie May 31 '22 at 13:19
  • [`document.referrer`](https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer) will be blank when the user came from a bookmark, or the user typed the URL into the box. – Ruan Mendes May 31 '22 at 13:38

1 Answers1

1

Can the client-side JavaScript route i.e. MyRoute know whether the navigation was via a browser bookmark vs clicking on some link?

If you mean "clicking on some internal link", then yes. But there is no way to distinguish a click on a bookmark from a click on an external link that leads to your website.

In any case, you leverage the document.referrer property: if it's equal to an empty string, the user navigated from an external source, otherwise it will contain the previous internal url.

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
  • Quite funny that clicking on that very [`document.referrer`](https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer) link and inspecting `document.referrer` in the target page it's `""`. Having a referrer might be a proof that the user came from a link, but not having one isn't a proof they came from other means. – Kaiido May 31 '22 at 13:46
  • Just tried this inside my React useEffect...even if I navigate from other page, the document.referrer is empty string – copenndthagen May 31 '22 at 13:55
  • @Kaiido yes that's exactly what I meant in my answer. If I remember well, in a previous version of JavaScript the `referrer` value was always populated with the source page URL. That has been then replaced to an empty string because it infringed on privacy of users – Christian Vincenzo Traina May 31 '22 at 13:57
  • @copenndthagen I suppose that my answer isn't applicable for SPAs. I'm sorry but I didn't think about it. What about using the session storage? – Christian Vincenzo Traina May 31 '22 at 13:59
  • @CristianTraìna - you mean using the session storage to push the value on route1 and retrieve on route2...If yes, actually I assume similar can be achieved via passing the route name as props...But I was just trying to see if we can have a more simpler solution.. – copenndthagen May 31 '22 at 14:06