Hitting Back button in React app doesn't reload the page Hitting Back button in React app doesn't reload the page reactjs reactjs

Hitting Back button in React app doesn't reload the page


You could implement something like this in your component:

import { inject, observer } from 'mobx-react';import { observe } from 'mobx';@inject('routerStore')@observerclass 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.


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?


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.