goBack() button doesn't work. HashRouter React

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