node.js - BrowserRouter 运行错误 - 无效 Hook 调用

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

我不确定，但我注意到您使用的是 react-router 版本 6。我认为您在版本 5 中实现了它。在版本 6 中，他们稍微改变了我们使用 < strong> react 路由器 https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6

试试这个:**你应该用路由器包装你的应用程序又名 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>
  );
};