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

Question

Я использую HashRouter для своих маршрутов в приложенииact.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.log(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);