Single page apps (SPA) have become commonplace in many of the web apps we see today. These apps are characterised by the use of logical, client-side routes within a single page. You can navigate to various parts (routes) of the application by modifying the URL without a full page load. This is handled by libraries such as react-router-dom, which works with the browser history to enable URL driven route changes.
Route change or navigation can be treated as a side effect in the MobX world. There is some state change happening to the observables, which results in navigation happening in the SPA. In this example, we will build this observable state, which tracks the current page shown in the browser. Using a combination of react-router-dom and the history package, we will show how routing becomes a side effect of the change in observable state.