我是 React 的新手，正在尝试做一些路由。

我试图在 React 中实现路由以重定向到另一个页面，但每次我插入时，它都会显示错误：无效的钩子调用。

这是来自 App.js 的代码

    import React from 'react';
    import './App.css';
    import Nav from './Nav';
    import EKGSim from './EKGSim';
    import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
    
    function App() {
      return(
        <Router>
        <div className='App'>
          <Nav />
          <Routes>
            <Route path="/ekgsim" element={<EKGSim/>} />
          </Routes>
        </div>
        </Router>
      )
    }
    
    export default App;

有人能告诉我问题出在哪里吗？ 我花了几个小时寻找解决方案，但一无所获。 任何帮助都将不胜感激！谢谢

Nav.js 的代码

    import React from 'react';
import './App.css';

function Nav(){
    return(
        <nav>
            <h3>Home</h3>
            <ul className='nav-links'>
                <li>Was Ist EKG?</li>
                <li>EKG Component</li>
                <li>EKG Simulator</li>
            </ul>
        </nav>
    );
}

export default Nav;

和 EKGSim.js 的代码

import React from 'react';
import './App.css';

function EKGSim(){
    return(
        <div>
            <h1>EKG Simulator

            </h1>
        </div>
    );
}

export default EKGSim;