我在渲染组件时遇到问题。我的控制台中出现“无效的钩子调用”错误。我尝试按照 React 文档 检查三个主要“原因”，但似乎找不到原因。我正在使用 React Router 并尝试为我的网站设置骨架。 完整存储库 。 （在安装（和设置）React Router 之前，一切都运行良好...）

据我所知，没有重复的 React：

这是我的 Header.js ：

import React, { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import { Over } from "../../pages/Over";
import { Partners } from "../../pages/Partners";
import { Contact } from "../../pages/Contact";
import { NavBar } from "./Header.styled";

export const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen((prevIsOpen) => !prevIsOpen);
  };

  return (
    <>
      <NavBar>
        <nav className="navBar">
          <button onClick={handleToggle}>{isOpen ? "Close" : "Open"}</button>
          <ul className={`menuNav ${isOpen ? " showMenu" : ""}`}>
            <li>
              <Link to="/over">Over</Link>
            </li>
            <li>
              <Link to="/partners">Partners</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>

          <Routes>
            <Route path="over" element={<Over />} />
            <Route path="partners" element={<Partners />} />
            <Route path="contact" element={<Contact />} />
          </Routes>
        </nav>
      </NavBar>
    </>
  );
};

这是我的 index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import { App } from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);