我收到错误：警告：无效的钩子调用和错误未选中的 runtime.lastError：

问：

vs code 编译器没有给出错误（webpack 编译成功），只有浏览器中的控制台给了我一个错误：

我收到错误： 未选中的 runtime.lastError：消息端口在收到响应之前关闭。 反应开发.js：209

警告：挂钩调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能违反了钩子规则
3. 你可能在同一个应用中有多个 React 副本 有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

react-dom.development.js：18687 <styled.nav>组件中出现了上述错误：

在 O （http://localhost:3000/static/js/bundle.js:78041:8） 在 Navbar 在路由器 （http://localhost:3000/static/js/bundle.js:66643:15） 在 BrowserRouter （http://localhost:3000/static/js/bundle.js:64758:5） 在 div 在应用程序

请考虑向树添加错误边界以自定义错误处理行为。 访问 https://reactjs.org/link/error-boundaries 以了解有关误差边界的更多信息。

Uncaught TypeError: Cannot read properties of null (reading 'useDebugValue')
    at useDebugValue (react.development.js:1659:1)
    at StyledComponent.js:116:1
    at O (StyledComponent.js:174:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./pages/about";
import Contact from "./pages/contact";
import Projects from "./pages/projects";

function App() {
  return (
    <Router>
      <Navbar></Navbar>
      <Routes>
        <Route path="/about" Component={About}></Route>
        <Route path="/projects" Component={Projects}></Route>
        <Route path="/contact" Component={Contact}></Route>
      </Routes>
    </Router>
  );
}

export default App;

这里是包 Json 文件

{
  "name": "mi_portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react-icons": "^4.11.0",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "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"
    ]
  }
  
}

此外，没有使用 npm ls react 的 react 的重复版本：

C:\Users\PERSONAL\AppData\Roaming\npm
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
└─┬ [email protected]
  ├─┬ r[email protected]
  │ └── [email protected] deduped
  └── [email protected]

我不知道这段代码的问题出在哪里，我已经尝试了很多东西，比如添加对等依赖项，但没有解决，我想我有一些错别字：

导航栏组件：

import React from "react";
import { Nav, NavMenu, NavLink, Bars } from "./NavbarElements";

function Navbar() {
  return (
    <Nav>
      <Bars />
      <NavMenu>
        <NavLink to="/about" activeStyle>
          About
        </NavLink>
        <NavLink to="/projects" activeStyle>
          Projects
        </NavLink>
        <NavLink to="/contact" activeStyle>
          Contact
        </NavLink>
      </NavMenu>
    </Nav>
  );
}

export default Navbar;

NavbarElements 文件：

import { FaBars } from "react-icons/fa";
import { NavLink as Link } from "react-router-dom";
import styled from "styled-components";

export const Nav = styled.nav`
  background: #63d471;
  height: 85px;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem calc((100vw - 1000px) / 2);
  z-index: 12;
  /* Third Nav */
  /* justify-content: flex-start; */
`;

export const NavLink = styled(Link)`
  color: #808080;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  cursor: pointer;
  &.active {
    color: #000000;
  }
`;

export const Bars = styled(FaBars)`
  display: none;
  color: #808080;
  @media screen and (max-width: 768px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 75%);
    font-size: 1.8rem;
    cursor: pointer;
  }
`;

export const NavMenu = styled.div`
  display: flex;
  align-items: center;
  margin-right: -24px;
  /* Second Nav */
  /* margin-right: 24px; */
  /* Third Nav */
  /* width: 100vw; 
white-space: nowrap; */
  @media screen and (max-width: 768px) {
    display: none;
  }
`;

关于组件：

import React from "react";

function About() {
  return (
    <div>
      <h1>About</h1>
      <p></p>
    </div>
  );
}

export default About;