这是我的代码：

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