title: Hitting Back button in React app doesn't reload the page
body: <p>I have a React app (16.8.6) written in TypeScript that uses React Router (5.0.1) and MobX (5.9.4). The navigation works fine and data loads when it should, however, when I click the browser's Back button the URL changes but no state is updated and the page doesn't get re-rendered. I've read endless articles about this issue and about the withRouter fix, which I tried but it doesn't make a difference.</p>
  
  <p>A typical use case is navigating to the summary page, selecting various things which cause new data to load and new history states to get pushed and then going back a couple of steps to where you started. Most of the history pushes occur within the summary component, which handles several routes. I have noticed that when going back from the summary page to the home page the re-rendering happens as it should.</p>
  
  <p>My index.tsx</p>
  
  <pre><code>import { Provider } from 'mobx-react'
  import * as React from 'react'
  import * as ReactDOM from 'react-dom'
  
  import App from './App'
  import * as serviceWorker from './serviceWorker'
  import * as Utils from './utils/Utils'
  
  const rootStore = Utils.createStores()
  
  ReactDOM.render(
      &lt;Provider {...rootStore }&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root') as HTMLElement
  )
  
  serviceWorker.unregister()
  </code></pre>
  
  <p>My app.tsx</p>
  
  <pre><code>import * as React from 'react'
  import { inject, observer } from 'mobx-react'
  import { Route, Router, Switch } from 'react-router'
  
  import Home from './pages/Home/Home'
  import PackageSummary from './pages/PackageSummary/PackageSummary'
  import ErrorPage from './pages/ErrorPage/ErrorPage'
  import { STORE_ROUTER } from './constants/Constants'
  import { RouterStore } from './stores/RouterStore'
  
  @inject(STORE_ROUTER)
  @observer
  class App extends React.Component {
      private routerStore = this.props[STORE_ROUTER] as RouterStore
  
      public render() {
          return (
              &lt;Router history={this.routerStore.history}&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path="/" component={Home} /&gt;
                      &lt;Route exact path="/summary/:packageId" component={PackageSummary} /&gt;
                      &lt;Route exact path="/summary/:packageId/:menuName" component={PackageSummary} /&gt;
                      &lt;Route exact path="/summary/:packageId/:menuName/:appName" component={PackageSummary} /&gt;
                      &lt;Route component={ErrorPage} /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          )
      }
  }
  
  export default App
  </code></pre>
  
  <p>My router store</p>
  
  <pre><code>import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router'
  import { createBrowserHistory } from 'history'
  
  export class RouterStore extends BaseRouterStore {
      constructor() {
          super()
          this.history = syncHistoryWithStore(createBrowserHistory(), this)
      }
  }
  </code></pre>
  
  <p>How I create the MobX stores</p>
  
  <pre><code>export const createStores = () =&gt; {
      const routerStore = new RouterStore()
      const packageListStore = new PackageListStore()
      const packageSummaryStore = new PackageSummaryStore()
      const packageUploadStore = new PackageUploadStore()
  
      return {
          [STORE_ROUTER]: routerStore,
          [STORE_SUPPORT_PACKAGE_LIST]: packageListStore,
          [STORE_SUPPORT_PACKAGE_SUMMARY]: packageSummaryStore,
          [STORE_SUPPORT_PACKAGE_UPLOAD]: packageUploadStore
      }
  }
  </code></pre>
  
  <p>So my questions are:</p>
  
  <ol>
  <li>How can I get the page to load the proper data when the user goes back/forward via the browser?  </li>
  <li>If the solution is being able to get MobX to observe changes to the location, how would I do that?</li>
  </ol>