BrowserRouter 運行錯誤 - 無效掛鈎調用

Question

這是我的代碼：

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。 我是一名高中生，非常感謝任何幫助！

Answer 1

這個問題發生在我身上，因為 package.json 中列出的反應依賴項存在沖突

通過在項目文件夾中運行npm ls ，確保項目中沒有多個 package.json 依賴項。

── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.2.0
├── @testing-library/user-event@13.5.0
├── react-dom@18.1.0
├── react-scripts@5.0.1
├── react@18.1.0
└── web-vitals@2.1.4

從 package.json 中刪除 react@13.2.0 並在項目文件夾中安裝 react-router-dom 解決了我的問題。

Answer 2

嘗試這個

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;

Answer 3

我不確定，但我注意到您使用的是react-router版本 6。我認為您在版本 5 中實現了該功能。在版本 6 中，他們改變了我們使用react-router Z5E056C500A1C4B6A71110B50D8/07BADE的方式。 v6/升級/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> ); };

Answer 4

我猜您正在遵循任何適用於react-router-dom v5指南，但您在代碼中使用了v6 。 這就產生了問題。

所以如果你想使用v5 ：
也許在Router內制作導航欄會起作用

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </>
  );
};

如果你想使用v6 ：
您需要在Router內使用Routes和 Navbar 包裝Route這是v6 指南

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Routes>
      </Router>
    </>
  );
}

如果您仍有問題，請告訴我。