从React的父组件推送到历史记录

Question

我看到了这篇文章Push to React Router History from Parent Component，但是不确定我应该如何组织事情。

我有应用-> 设备，并且我的设备包含HashRouter。我希望在App上有一个按钮，以调用设备的哈希历史记录上的 goBack 和 push 。

我已经做到了。它可以工作，但感觉有点难看。

class HistoryHandler extends Component {
    componentWillMount = () => this.props.setHistory(this.props.history)
    render = () => null
}

const RouterHistoryHandler = withRouter(HistoryHandler)

const Device = ({ setHistory }) =>
    <div id="device">
        <div id="display">
            <HashRouter>
                <RouterHistoryHandler setHistory={setHistory}/>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/trips" component={Trips} />
                </Switch>
            </HashRouter>
        </div>
    </div>

class App extends Component {

    setHistory  = history => this.setState({ history })
    goBack      = () => this.state.history.goBack()

    clearStorage = () => localStorage.clear()

    render = () =>
        <div>
            <Device setHistory={this.setHistory}/>
            <p/>
            <button onClick={this.clearStorage}>Apagar memória</button>
            <p/>
            <button onClick={this.goBack}>Voltar para trás</button>
        </div>
}

有没有更好的方法来解决这个问题？