无法解决 Invalid Hook Call 错误（结合 React Router）

Question

我在渲染组件时遇到问题。我的控制台出现 'Invalid Hook call' 错误。我已尝试根据 React docs, but I can't seem to find what it is. I'm using React Router and trying to set up the skeleton for my website. Full repository 检查三个主要 'causes'。（在安装（和设置）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>
);

Answer 1

我刚刚检查了您的存储库，但在您的 package.json 文件中找不到 react-router-dom。也许您将它安装在不同的目录中，因此将它重新安装在根级别（您的 package.json 所在的位置）应该可以解决问题。

无法解决 Invalid Hook Call 错误（结合 React Router）

Can't resolve Invalid Hook Call error (in conjunction with React Router)

javascript

reactjs

react-router