错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 通过路由反应

Question

I am a beginner with React and trying to do some Routing.

I'm trying to implement Route in React to redirect to another page, but everytime i insert, it shows error: Invalid hook call.

Here's the code from 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;

Can anyone tell me where the problem is? I've been trying for hours searching for the solution but came up to nothing. Any help will be appreciated! Thanks

Code for the 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;

and the EKGSim.js

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

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

            </h1>
        </div>
    );
}

export default EKGSim;

Answer 1

You need to use Route inside Routes try this

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/ekgsim" element={<EKGSim/>} />
        </Routes>
      </div>
    </Router>
  );
}

Answer 2

Problem solved!

I just run this command npm install --save react-router-dom and it run perfectly!

I think the problem was that there was no react-router-dom in my package.json.

Thanks for everyone's answer!