score:0

If I remember correctly, using a browser back function does not reload the page (I might be wrong).

Why not try to detect the back action by a browser and reload the page when detected instead?

You can try the following code to manually reload the page when the browser back button is clicked.

$(window).bind("pageshow", function() {
  // Run reload code here.
});

Also out of curiosity, why do you need so many different stores?

score:0

In App.js

useEffect(() => {    
   window.onpageshow = function(event) {
     if (event.persisted) {
       window.location.reload();
     }
   };
}, []);

score:1

React router monitors url changes and renders associated component defined for the route aka url. You have to manually refresh or call a window function to reload.

score:2

You could implement something like this in your component:

import { inject, observer } from 'mobx-react';
import { observe } from 'mobx';

@inject('routerStore')
@observer
class PackageSummary extends React.Component {
  listener = null;
  componentDidMount() {
    this.listener = observe(this.props.routerStore, 'location', ({ oldValue, newValue }) => {
      if (!oldValue || oldValue.pathname !== newValue.pathname) {
        // your logic
      }
    }, true)
  }

  componentWillUnmount() {
    this.listener();
  }
}

Problem with this approach is that if you go back from /summary to other page (e.g. '/'), callback will initiate, so you would also need some kind of check which route is this. Because of these kind of complications I would suggest using mobx-state-router, which I found much better to use with MobX.


Related Query

More Query from same tag