title: Can't resolve Invalid Hook Call error (in conjunction with React Router)
body: <p>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 <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow noreferrer">React docs</a>, 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. <a href="https://github.com/YinChuRijnaard/vi-website" rel="nofollow noreferrer">Full repository</a>. (Before installing (and setting up) React Router, everything worked just fine...)</p>
  <p>No duplicate React as far as I can tell: <a href="https://i.stack.imgur.com/Wcl2l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wcl2l.png" alt="After running npm ls react" /></a></p>
  <p>Here's my <code>Header.js</code>:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Routes, Route, Link } from &quot;react-router-dom&quot;;
  import { Over } from &quot;../../pages/Over&quot;;
  import { Partners } from &quot;../../pages/Partners&quot;;
  import { Contact } from &quot;../../pages/Contact&quot;;
  import { NavBar } from &quot;./Header.styled&quot;;
  
  export const Header = () =&gt; {
    const [isOpen, setIsOpen] = useState(false);
  
    const handleToggle = () =&gt; {
      setIsOpen((prevIsOpen) =&gt; !prevIsOpen);
    };
  
    return (
      &lt;&gt;
        &lt;NavBar&gt;
          &lt;nav className=&quot;navBar&quot;&gt;
            &lt;button onClick={handleToggle}&gt;{isOpen ? &quot;Close&quot; : &quot;Open&quot;}&lt;/button&gt;
            &lt;ul className={`menuNav ${isOpen ? &quot; showMenu&quot; : &quot;&quot;}`}&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/over&quot;&gt;Over&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/partners&quot;&gt;Partners&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/contact&quot;&gt;Contact&lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;Routes&gt;
              &lt;Route path=&quot;over&quot; element={&lt;Over /&gt;} /&gt;
              &lt;Route path=&quot;partners&quot; element={&lt;Partners /&gt;} /&gt;
              &lt;Route path=&quot;contact&quot; element={&lt;Contact /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/nav&gt;
        &lt;/NavBar&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>Here's my <code>index.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom/client&quot;;
  import { BrowserRouter } from &quot;react-router-dom&quot;;
  import &quot;./index.css&quot;;
  import { App } from &quot;./App&quot;;
  
  const root = ReactDOM.createRoot(document.getElementById(&quot;root&quot;));
  
  root.render(
    &lt;BrowserRouter&gt;
      &lt;React.StrictMode&gt;
        &lt;App /&gt;
      &lt;/React.StrictMode&gt;
    &lt;/BrowserRouter&gt;
  );
  </code></pre>