使用React Router 4拦截反向导航？

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

const Home = () => (
  <div>
    <h2>Home</h2>
    <Link to="/about">Go to About</Link>
  </div>
);

const About = () => {
  const [isBlocking, setIsBlocking] = useState(false);

  const handleInputChange = (e) => {
    setIsBlocking(e.target.value.length > 0);
  };

  return (
    <div>
      <h2>About</h2>
      <Prompt
        when={isBlocking}
        message="Are you sure you want to leave? Your changes will be lost."
      />
      <input type="text" onChange={handleInputChange} />
      <Link to="/">Go to Home</Link>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

export default App;