1

I have a React/React-Router application that is required to know the context on how users landed on the page. There could be two different cases (1) 302 redirection (2) client-side redirection.

Let me add use cases to give more details around it

(1): users directly hits the URL and landed on a page

(2): Users clicked a button and are redirected to another page via Link API.

I noticed that the react router props contains history object and on (1) case, the history action is POP while on client-side redirection cases (2) it was either PUSH or REPLACE. Would it be a good assumption that I can honor the history action and determine 302 redirection by checking the action === POP?

supergentle
  • 1,001
  • 1
  • 14
  • 33

1 Answers1

1

to suit your particular your use case there are multiple approaches on how we can achieve this let's go over a few you referred to in question

  • User clicks on a button: so if we have full control over the functionality of a button we can define multiple parameters if a user clicks on it e.g. we can add a query parameter on the forwarding url and on the next page we know where the user came from kinda like this www.example.com/?referrer=oldButton this would indicate clear patterns on how a user came to the page. or in terms of react router, we can pass additional params to access later on another component.
 history.push('/path', yourData);
  • users directly hits the URL and landed on a page: you assumed correct we can use POP, PUSH, REPLACE methods to identify how the user came to land on a specific page. a browser use what we call history, it keeps a record of every page visited before or after another, we can either use it directly or through react-router

Hope that helped :)

Umair Ahmed
  • 542
  • 5
  • 12
  • Hi thanks for your answers. Yeah I am a bit hesitant on the first approach given that we need to implement it in each use case. But for the second approach (history API), I am pretty sure when users are redirected by Link or Redirect APIs it would be always either REPLACE or PUSH action. But I am still researching on how certain that I can depend on the POP action on the initial page render (or 302 redirection). Would there any be case where POP is triggered but is not a 302 redirection? – supergentle Aug 06 '20 at 00:37
  • in that case there's something called document.referer which tells you if the user was redirected from somewhere or landed directly on it, i'm gonna link to another answer that might help you out https://stackoverflow.com/a/36522879/5974604 – Umair Ahmed Aug 06 '20 at 00:40
  • Looks like document.referrer returns empty string as well for the client-side redirection using Link API... Not sure if that is reliable... – supergentle Aug 06 '20 at 00:47
  • I tried to find a generic way to differentiate the 302 redirection and the client-side redirection, but couldn't really find it. Rather, the first apporach you suggested would be looking suboptimal, but that would be a viable solution for me at this moment. Thanks! – supergentle Aug 29 '20 at 07:45