与React Router链接时，如何传递函数？

import { Link } from 'react-router-dom';

function Home() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about" onClick={handleClick}>Go to About</Link>
    </div>
  );
}

export default Home;

import { Route, useHistory } from 'react-router-dom';

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

  const handleClick = () => {
    console.log('Button clicked!');
    history.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <div>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

export default App;