這是我的代碼：
import React from "react";
import ReactDOM from "react-dom";
import Navbar from "./components/Navbar/Navbar";
import "./App.css";
import Home from "./components/Home/Home";
import { BrowserRouter as Router, Route } from "react-router-dom";
import About from "./components/About/About";
const App = () => {
return (
<>
<Navbar />
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
</>
);
};
export default App;
這是我的 package.json：
{
"name": "neighborhoodmovements",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"server": "nodemon server.js",
"devStart": "nodemon server.js",
"client": "cd client && npm start",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Brian Mason",
"license": "ISC",
"dependencies": {
"express": "^4.17.2",
"mongodb": "^4.2.2",
"mongoose": "^6.1.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1"
},
"devDependencies": {
"concurrently": "^6.5.0",
"dotenv": "^10.0.0",
"nodemon": "^2.0.15"
},
"proxy": "http://localhost:5000"
}
當我運行代碼時，我在瀏覽器中收到三個錯誤：
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476)
at useRef (react.development.js:1515)
at BrowserRouter (index.tsx:140)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
react-dom.development.js:20085 The above error occurred in the <BrowserRouter> component:
at BrowserRouter (http://localhost:3000/static/js/bundle.js:43368:5)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476)
at useRef (react.development.js:1515)
at BrowserRouter (index.tsx:140)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
導航欄：
import React from "react";
import "./Navbar.css";
import { Link } from "react-router-dom";
import { useState } from "react";
function Navbar() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<>
<div className="navbar">
<div className="leftSide">
<Link to="/">
<h2 id="header">NeighborhoodMovements</h2>
</Link>
{isLoggedIn && (
<Link to="/dashboard">
<h2 id="nav-item">Dashboard</h2>
</Link>
)}
</div>
<div className="rightSide"></div>
</div>
</>
);
}
export default Navbar;
家：
import React from "react";
function Home() {
return <h1>Home</h1>;
}
export default Home;
關于：
import React from "react";
function About() {
return <h1>About</h1>;
}
export default About;
不太確定錯誤是什么。我已經閱讀了多個關于如何使用 React 路由器的指南，但它們并沒有真正幫助。我正在嘗試設定這些路由器以與 express.js 一起作業。我嘗試注釋掉不同的依賴項，但主要錯誤似乎僅在于 BrowserRouter。我是一名高中生，非常感謝您的幫助！
uj5u.com熱心網友回復：
試試這個
import React from "react";
import "./App.css";
import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import About from "./components/About/About";
const App = () => {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Routes>
</BrowserRouter>
);
};
export default App;
uj5u.com熱心網友回復：
我猜您正在遵循任何有效的指南，react-router-dom v5但您正在v6代碼中使用。這就產生了問題。
所以如果你想使用v5：
也許在里面制作 NavbarRouter會起作用
const App = () => {
return (
<>
<Router>
<Navbar />
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
</>
);
};
如果您想使用v6：
您需要將RoutewithRoutes和 Navbar 包裹在Router
Here's the v6 guide
const App = () => {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Routes>
</Router>
</>
);
}
如果您仍有問題，請告訴我。
uj5u.com熱心網友回復：
我不確定，但我注意到您使用的是react-router版本 6。我認為您在版本 5 中實作了它。在版本 6 中，他們改變了我們使用react-router 的方式 https://reactrouter.com/ docs/en/v6/upgrading/v5#upgrade-to-react-router-v6
試試這個：**你應該用 Router aka BrowserRouter包裝你的應用程式
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const App = () => {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
};轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386075.html