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?


In App.js

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


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.


You could implement something like this in your component:

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

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() {

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