mercredi 2 septembre 2020

Go Back button is not working when added a query param in ReactJs

Let me introduce what I am doing which is causing the issue. I have 3 routes in my React web application:

  1. "/" for home page.
  2. "/page2" for page2.
  3. "/page3" for page3.

Now what I am doing as soon as when I go on route "/page2", I push a query param in the URL to render the default tab in page2 making the URL as "/page2?activeTab=tabId". So in a brief, when I will try to go to "/page2" it will always make the URL as "/page2?activeTab=tabId".

Now the issue is when I land on Page2 for the first time and try to press back button on browser. I again and again re-renders page2. The reason is: Suppose I am on page2 for the first time and the URL will be as "/page2?activeTab=tabId". Now when I press back button, the browser removes the query param and renders the URL "/page2". So whenever the URL renders my code again turns it to "/page2?activeTab=tabId". Because of this I can't go back and stuck at the second page only.

I want help in this. How to eliminate or avoid this issue?




Aucun commentaire:

Enregistrer un commentaire