使用HashRouter时以编程方式导航

Question

我在react.js应用程序中使用HashRouter进行路由。然后，我有一个执行以下操作的函数：

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);