How to prevent reloading in React?

user_14216893 0
Viewed 171

I have two pages let's say page A and page B, page A can link to page B, and page B has a Return button can go back to page A. Inside page A, there is a paginated table which is a child component. each time when I click on the Return button on page B, it triggers this.porps.history.goBack() function and takes me to page A. and the problem is here, each time when I go back from page B to page A, the page A will be reloaded and the paginated table will be reloaded as well which means I will always see the first page content of the table no matter which page I was in of the table before.

I am wondering if there is way to solve this problem? Let's say in page A the table is showing second page content, when I go to page B and click Return button back to page A, in page A the table is showing second page content instead of the first page content.

react-router-dom reactjs javascript
1 Answers

There are 2 possible ways I can think of now.

  1. Your url can store your page number. /page-a?page=2 Based on query param (2 in this case), you can render the proper page
  2. Page B can just be populated on top of page A.
   <PageA>
      PageAContent
      <Route path="/page-b">
         <PageB>
            PageBContent
         </PageB>
      </Route>
   <PageB>

This way you can just keep the content of PageA without refreshing it.

user_142120260
Related