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

Question

I'm having an issue with rendering components. I get an 'Invalid Hook call' error in my console. I've tried to check for the three main 'causes' as per the 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. (Before installing (and setting up) React Router, everything worked just fine...)

No duplicate React as far as I can tell:

Here's my 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>
    </>
  );
};

Here's my 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

I just checked your repository and couldn't find react-router-dom in your package.json file. Maybe you installed it in a different directory, so reinstalling it in the root level (where your package.json) is located is should solve the issue.