Redirect to first page if user refresh the browser in ReactJS

Question

I have a URL for product page like http://localhost:3000/product?page=1 and at the bottom of the page there is a button Load More. If we click that button, it will change the URL http://localhost:3000/product?page=2 (without reloading the page) and show the products for the page.
I want that if user refresh the browser and page>1 then user should redirect to page=1. i.e; We don't allow page refresh if page > 1
Basically, question is about to detect page reload.

I tried :

if (window.performance) {
  if (PerformanceNavigationTiming.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

But this did not work for me.

So, you want to prevent reload? Or do you want to have a certain behavior on reload? If it is the latter, then you could just have add a check of the URL each time the page get loaded and depending on the URL redirect or not. — Geshode
– Geshode, Commented Oct 26, 2022 at 5:29
I am saying that "if page>1 in url and user refresh the browser or manually entered http://localhost:3000/product?page=2, then user should redirect to page=1". — Abhishek kamal
– Abhishek kamal, Commented Oct 26, 2022 at 5:59
At the bottom of the page there is a button Load More. If we click that button, it will change the URL for the next page http://localhost:3000/product?page=2 (without reloading the page) — Abhishek kamal
– Abhishek kamal, Commented Oct 26, 2022 at 6:06
Then add a check of the URL in the beginning of the JS file, so that each time the page is loaded, you check, if page > 1 and if it is redirect to page=1. — Geshode
– Geshode, Commented Oct 26, 2022 at 6:33

Anu · Accepted Answer · 2022-10-26 07:03:06Z

1

All you want to do is something when the page component mounts for the first time, for example setting the page number back to 1. So on the page component inside useEffect(()=>{ //do whatever you want,like setting the page no to 1 },[]) - which will be called once every time when the page mounts. Hope this helps!!

answered Oct 26, 2022 at 7:03

Anu

3891 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek kamal Over a year ago

Thanks, I am coding continuously from last 10 hours and my mind is not able to solve simple problems now ....haha

Collectives™ on Stack Overflow

Redirect to first page if user refresh the browser in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related