React:无法使用带有react-router的工具栏更改组件

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

function Home() {
  return <h2>Home</h2>;
}

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

export default App;

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

function Toolbar() {
  const location = useLocation();

  return (
    <div>
      <h3>Current Route: {location.pathname}</h3>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </div>
  );
}

export default Toolbar;

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { changeRoute } from './actions';

function Toolbar() {
  const dispatch = useDispatch();
  const history = useHistory();
  const currentRoute = useSelector(state => state.currentRoute);

  const handleRouteChange = (route) => {
    dispatch(changeRoute(route));
    history.push(route);
  };

  return (
    <div>
      <h3>Current Route: {currentRoute}</h3>
      <ul>
        <li>
          <button onClick={() => handleRouteChange('/')}>Home</button>
        </li>
        <li>
          <button onClick={() => handleRouteChange('/about')}>About</button>
        </li>
      </ul>
    </div>
  );
}

export default Toolbar;