goBack() button doesn't work. HashRouter React - reactjs

Question

I've tried all possible versions but goBack() button does not work.
Not sure what I am doing wrong but I was following this solution:
react-router (v4) how to go back?
Anyway here is the code I am trying and I have feeling that there is something to do with HashRouter.
Also How can I put the button in Navbar instead of calling it in App?
import React from 'react';
import { HashRouter, Route, withRouter } from 'react-router-dom';
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import store from './store'
import PrivateRoute from './components/auth/PrivateRoute'
class App extends React.Component {
constructor(props){
super(props);
this.goBack = this.goBack.bind(this); // i think you are missing this
}
componentDidMount(){
store.dispatch(loadUser())
}
goBack(){
this.props.history.goBack();
}
render(){
return (
<Provider store={store}>
<HashRouter basename="/">
<Navbar />
<button onClick={this.goBack()}>Go Back</button>
<Route exact path="/" component={Home}/>
<PrivateRoute path="/aeons" component={AeonsList} />
</HashRouter>
</Provider>

Answer 1

I had an example. Please check it, hope it helps you.
import React from "react";
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {withRouter} from "react-router";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/about/insideabout">Inside About</Link>
</li>
</ul>
<hr/>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/about">
<About/>
</Route>
<Route path="/about/insideabout">
<InsideAbout/>
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
const About = withRouter(({history, ...props}) => (
<div>
<h1>
About
<hr/>
<button onClick={() => {
// history.push('/')
history.goBack(-1);
}}>go back
</button>
</h1>
</div>
));
const InsideAbout = withRouter(({history, ...props}) => (
<h1 {...props}>
Inside About
<hr/>
<button onClick={() => {
history.goBack();
}}>go back
</button>
<button onClick={() => {
history.go(-2);
}}>go home
</button>
</h1>
));

Answer 2

This how I solved it: Create another component with Go Back button and call it anywhere you want
import React from 'react';
import { withRouter } from 'react-router';
const GoBackButton = withRouter(({history, ...props}) => (
<div>
<button onClick={() => {
// history.push('/')
history.goBack(-1);
}}>go back
</button>
</div>
));
export default GoBackButton