无法使用反应路由器

Question

即使我直接使用来自https://www.w3schools.com/react/react_router.asp 等来源的代码，我也无法使用路由器

index.js

 import ReactDOM from "react-dom";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Layout from "./pages/Layout";
 import Home from "./pages/Home";
 import Contact from "./pages/Contact";

 export default function App() {
 return (
 <BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="contact" element={<Contact />} />
    </Route>
    </Routes>
  </BrowserRouter>
  );
  }

 ReactDOM.render(<App />, document.getElementById("root"));

布局.js

 import { Outlet, Link } from "react-router-dom";

 const Layout = () => {
 return (
  <>
   <nav><ul><li><Link to="/">Home</Link></li>
           <li><Link to="/contact">Contact</Link></li>
       </ul>
   </nav>
   <Outlet />
  </>
)
};
export default Layout;

Home.js

 const Home = () => {
 return <h1>Home</h1>;
 };
 export default Home;

不过，我还是遇到了这个错误。

react.development.js:1476

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

package.json

 {
  "name": "sunalanda",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "@testing-library/jest-dom": "^5.16.1",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "5.0.0",
  "web-vitals": "^2.1.2"
 },
  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
 },
  "eslintConfig": {
  "extends": [
  "react-app",
  "react-app/jest"
]
},
  "browserslist": {
  "production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
  "development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
}
}

Error image

Answer 1

您的 package.json 文件中似乎缺少 react-router-dom。

运行npm install -s react-router-dom 以安装并更新/保存对 package.json 文件的依赖项。

杀死并重新启动所有开发服务器，npm start。