如何让纯css下拉菜单与re的两个可重定向的链接一起工作？

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

const DropdownMenu = () => {
  const [isOpen, setIsOpen] = useState(false);
  const history = useHistory();

  const handleLinkClick = (path) => {
    setIsOpen(false);
    history.push(path);
  };

  return (
    <div className="dropdown">
      <button className="dropdown-toggle" onClick={() => setIsOpen(!isOpen)}>
        下拉菜单
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          <li>
            <Link to="/link1" onClick={() => handleLinkClick('/link1')}>
              链接1
            </Link>
          </li>
          <li>
            <Link to="/link2" onClick={() => handleLinkClick('/link2')}>
              链接2
            </Link>
          </li>
        </ul>
      )}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/link1">
          <div>链接1的内容</div>
        </Route>
        <Route path="/link2">
          <div>链接2的内容</div>
        </Route>
        <Route path="/">
          <DropdownMenu />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;