错误:无效钩子调用。钩子只能在函数组件的主体内调用。通过反应中的路由

Question

我是一个反应初学者，并试图做一些路由。

我正在尝试实现路由，以响应重定向到另一个页面，但是每次插入时，它都会显示错误:无效的钩子调用。

这是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;

Answer 1

问题解决了！

我只需运行这个命令npm install --save react-router-dom，它就能完美地运行！

我认为问题在于我的package.json中没有反应路由器。

谢谢大家的回答！

Answer 2

您需要在Route内部使用Routes，尝试如下

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