Программная навигация при использовании HashRouter

Я использую HashRouter для своих маршрутов в приложении response.js. Затем у меня есть функция, которая делает следующее:

this.props.history.push('/somePath');

Проблема в том, что с тех пор, как я начал использовать HashRouter, страница не отправляется по этому пути при вызове этой функции.

Я зарегистрировал this.props.history, и push был там.

Как я могу программно перемещаться при использовании HashRouter?

Примечание: я использовал withRouter

Вот код:

import React, { Component } from 'react';
import { HashRouter, Route, Switch, Redirect, withRouter } from 'react-router-dom';
// Other imports

class App extends Component {
    navigate = () => {
        this.props.history.push('/route1');
        console.info(this.props.history);
    };

    render() {    
        return (
            <div className = "App">
                <Header />

                <HashRouter>
                    <Switch>
                        <Route
                            path = "/route1"
                            exact
                            render = {() => (
                                <FirstRoute someSetting='setting1'/>
                            )}
                        />
                        <Route
                            path = "/route2"
                            exact
                            render = {() => (
                                <SecondRoute anotherSetting='Really Cool'/>
                            )}
                        />
                        <Route path = "/404" component = {NotFound} />
                        <Route exact path = "/" render = {() => <HomePage someSettings='Home Page' />} />
                        <Redirect to = "/404" />
                    </Switch>
                </HashRouter>

                <BottomBar />
            </div>
        );
    }
}

export default withRouter(App);