mobx-react-router: Using Browser buttons, gets rendered page out of sync with path

My routing seems to work fine. But when I use the browser ‘back’ button, the URL changes correctly, but the page then doesn’t match the URL. The first time I hit the back button, nothing happens. Then second time I click it goes to where it should have gone the first time.

This is my entry point: index.tsx:

 {UserStore} from './data/stores/UserStore';
declare let module: any;

import * as React from "react";
import * as ReactDOM from "react-dom";
import {AppContainer} from 'react-hot-loader';
import { Router } from 'react-router';
// import createHistory from 'history/createBrowserHistory';
import createHistory from 'history/createHashHistory';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import { App } from "./components/app/App";

const history = createHistory();
const routingStore = new RouterStore();
const users = new UserStore();
const synchronizedHistory = syncHistoryWithStore(history, routingStore);
const stores = {
    routing: routingStore,
    users: users
};

const renderApp = (Component: any) =>
{
    ReactDOM.render(
        <AppContainer>
            <Provider {...stores}>
                <Router history={synchronizedHistory}>
                    <Component />
                </Router>
            </Provider>
        </AppContainer>,
        document.getElementById("app_content")
    );
};

renderApp(App);

// Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./components/app/App', () => {
        renderApp(App)
    });
}

My app file:

import 'bootstrap';
import * as React from 'react';
import {TopNav} from '../topnav/TopNav';
import {History} from 'history';
import {Routes} from './Routes';
import {inject, observer} from 'mobx-react';
import {UserStore} from '../../data/stores/UserStore';
import {Level, Logger} from '../../util/Logger';

interface IAppProps { routing: History, users: UserStore }

@inject('routing')
@observer
export class App extends React.Component<IAppProps, undefined>
{
    //noinspection JSMethodCanBeStatic,JSUnusedLocalSymbols
    private log(msg: string, level?: Level): void
    {
        Logger.get().log(msg, 'App', level || Level.TRACE);
    }

    render(): JSX.Element
    {
        const { location } = this.props.routing;
        return (
            <div>
                <TopNav/>
                <div className='container body-content'>
                    <Routes/>
                    <div className='small'>path: {location.pathname}</div>
                </div>
            </div>);
    }
}

My routes file:

import * as React from 'react';
import {Route, Switch} from 'react-router-dom';
import {HomePage, PageOne, PageThree, PageTwo} from '../home/HomePage';
import {PendingDeliveryPage} from '../delivery/PendingDeliveryPage';
import {DeliveryExecutePage} from '../delivery/DeliveryExecutePage';


export class Routes extends React.Component<undefined, undefined>
{
    public render(): JSX.Element
    {
        return (
            <Switch>
                <Route exact path='/' component={HomePage} />
                <Route path='/delivery/:id/execute' component={DeliveryExecutePage} />
                <Route path='/delivery' component={PendingDeliveryPage} />
                <Route path='/one' component={PageOne} />
                <Route path='/two' component={PageTwo} />
                <Route path='/three' component={PageThree} />
            </Switch>
        );
    }
}

And lastely my test pages:

import * as React from "react";
import {Link, RouteComponentProps} from 'react-router-dom';

export class HomePage extends React.Component<RouteComponentProps<any>, undefined>
{
    public render(): JSX.Element
    {
        return (
            <div>
                <h1>Home</h1>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/one">One</Link></li>
                    <li><Link to="/two">Two</Link></li>
                    <li><Link to="/three">Three</Link></li>
                </ul>
            </div>);
    }
}

export class PageOne extends React.Component<RouteComponentProps<any>, undefined>
{
    public render(): JSX.Element
    {
        return (
            <div>
                <h1>Page One</h1>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/one">One</Link></li>
                    <li><Link to="/two">Two</Link></li>
                    <li><Link to="/three">Three</Link></li>
                </ul>
            </div>);
    }
}

export class PageTwo extends React.Component<RouteComponentProps<any>, undefined>
{
    public render(): JSX.Element
    {
        return (
            <div>
                <h1>Page Two</h1>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/one">One</Link></li>
                    <li><Link to="/two">Two</Link></li>
                    <li><Link to="/three">Three</Link></li>
                </ul>
            </div>);
    }
}

export class PageThree extends React.Component<RouteComponentProps<any>, undefined>
{
    public render(): JSX.Element
    {
        return (
            <div>
                <h1>Page Three</h1>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/one">One</Link></li>
                    <li><Link to="/two">Two</Link></li>
                    <li><Link to="/three">Three</Link></li>
                </ul>
            </div>);
    }
}

You can click

1. Start at ‘Home’
2. Click ‘One’
3. Click ‘Two’
4. Click ‘Three’, and everthing should be fine.
5. Click Browser Back, path changes to /two, but page does not render anything new.
6. Click Browser Back and path changes to /one, and now page /two renders.
7. Click Browser Back and page changes to /, but page /one renders.
8. etc.

Am i doinng something wrong here?