React useHistory hook example

UseHistoryExample.jsx

import React from "react";
import { BrowserRouter as Router, 
Switch, Route, Link, useHistory} from "react-router-dom";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
   let history = useHistory();

  const handleClick1 = () => history.push("/about");
  const handleClick2 = () => history.push("/dashboard");

  return (
    <div>
      <h2>Home</h2>
      <button type="button" onClick={handleClick1}>
        Go About
      </button>
      <span style={{paddingLeft: '5px'}}>
        <button type="button" onClick={handleClick2}>
          Go Dashboard
        </button>
      </span>
    </div>
  );
}

function About() {
  let history = useHistory();
  const handleClick = () => history.push("/");
  
  return (
    <div>
       <h2>About</h2>
      <button type="button" onClick={handleClick}>
        Go Home
      </button>
    </div>
  );
}

function Dashboard() {
  let history = useHistory();
  const handleClick = () => history.push("/");

  return (
    <div>
      <h2>Dashboard</h2>
      <button type="button" onClick={handleClick}>
      Go Home
    </button>
    </div>
  );
}