如何在单击按钮时重定向到另一个组件？

<button id="redirectButton">点击跳转</button>

import React from 'react';
import { useHistory } from 'react-router-dom';

const ButtonComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/another-component');
  };

  return (
    <button id="redirectButton" onClick={handleClick}>
      点击跳转
    </button>
  );
};

export default ButtonComponent;

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ButtonComponent from './ButtonComponent';
import AnotherComponent from './AnotherComponent';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ButtonComponent} />
        <Route path="/another-component" component={AnotherComponent} />
      </Switch>
    </Router>
  );
};

export default App;