My app has two pages, first, the home page, which is a list of items, loaded with ajax, and support pagination. when you click an item in the list, it will render a new page, shows the detail of the item. I'm using react-router and it works fine.

However, when I press back button, I'll get back to the home page, and all the previous state is lost, I have to wait for ajax load again, and lost the pagination too.

So, how can I improve this, let the page act as an ordinary one (when you press back button you can return to the previous state instantly, even with the same scroll position), thanks.

My app has two pages, first, the home page, which is a list of items, loaded with ajax, and support pagination. when you click an item in the list, it will render a new page, shows the detail of the item. I'm using react-router and it works fine.

However, when I press back button, I'll get back to the home page, and all the previous state is lost, I have to wait for ajax load again, and lost the pagination too.

So, how can I improve this, let the page act as an ordinary one (when you press back button you can return to the previous state instantly, even with the same scroll position), thanks.

• javascript
• reactjs

Share Improve this question Follow asked Apr 4, 2015 at 12:10 wong2wong2 35.8k5151 gold badges137137 silver badges182182 bronze badges 4

• If you have two actual HTML pages you're navigating, you'd need to rely on something like local storage, or use only web page. – WiredPrairie Commented Apr 4, 2015 at 12:50
• @WiredPrairie I have only one HTML page – wong2 Commented Apr 4, 2015 at 12:51
• Where are you storing the state of your app? What is triggering the Ajax requests a second time? – WiredPrairie Commented Apr 4, 2015 at 14:25
• @WiredPrairie click on a button – wong2 Commented Apr 5, 2015 at 14:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I've solved this myself by providing a module Store, which is like this:

// Store.js

var o = {};

var Store = {
  saveProductList: function(state) {
    o['products'] = state;
  },
  getProductList: function() {
    return o['products'];
  }
};    

module.exports = Store;

then in the home page ponent, load and save the state:

ponentDidMount: function() {
  var state = Store.getProductList();
  if (state) {
    this.setState(state);
  } else {
    // load data via ajax request
  }
},

ponentWillUnmount: function() {
  Store.saveProductList(this.state);
}

this works for me.

You should use dynamic routes like this example:

<Route name="inbox" handler={Inbox}>
  <Route name="message" path=":messageId" handler={Message}/>
  <DefaultRoute handler={InboxStats}/>
</Route>

If you change the messageId(child ponent) you will still have the same state in the Inbox(parent) Component.

It will look something like this:

<Route name="search" path="/search/:query?/:limit?/:offset?" handler={Search} />