<Prompt
  when={isBlocking}
  message={location =>
    `Are you sure you want to go to ${location.pathname}`
  }
/>

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

function Home() {
  const [value, setValue] = useState("");
  return (
    <div>
      <Prompt when={!!value} message="are you sure?" />
      <input value={value} onChange={e => setValue(e.target.value)} />
    </div>
  );
}

function About() {
  return <div>About</div>;
}

function Nav() {
  return (
    <div>
      <Link to="/">home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

function getUserConfirmation(message, callback) {
  const el = document.querySelector("#confirm");
  function decide(result) {
    callback(result);
    ReactDOM.unmountComponentAtNode(el);
  }
  function ConfirmModal() {
    return (
      <div>
        <p>{message}</p>
        <button onClick={() => decide(false)}>cancel</button>
        <button onClick={() => decide(true)}>ok</button>
      </div>
    );
  }

  ReactDOM.render(<ConfirmModal />, el);
}

export default function App() {
  return (
    <div className="App">
      <Router getUserConfirmation={getUserConfirmation}>
        <Nav />
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}