title: BrowserRouter Running Error - Invalid Hook Call
body: <p>Here is my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import Navbar from &quot;./components/Navbar/Navbar&quot;;
  import &quot;./App.css&quot;;
  import Home from &quot;./components/Home/Home&quot;;
  import { BrowserRouter as Router, Route } from &quot;react-router-dom&quot;;
  import About from &quot;./components/About/About&quot;;
  const App = () =&gt; {
    return (
      &lt;&gt;
        &lt;Navbar /&gt;
        &lt;Router&gt;
          &lt;Route path=&quot;/&quot; component={Home} /&gt;
          &lt;Route path=&quot;/about&quot; component={About} /&gt;
        &lt;/Router&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Here is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;neighborhoodmovements&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;server.js&quot;,
    &quot;scripts&quot;: {
      &quot;server&quot;: &quot;nodemon server.js&quot;,
      &quot;devStart&quot;: &quot;nodemon server.js&quot;,
      &quot;client&quot;: &quot;cd client &amp;&amp; npm start&quot;,
      &quot;dev&quot;: &quot;concurrently \&quot;npm run server\&quot; \&quot;npm run client\&quot;&quot;
    },
    &quot;author&quot;: &quot;Brian Mason&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;express&quot;: &quot;^4.17.2&quot;,
      &quot;mongodb&quot;: &quot;^4.2.2&quot;,
      &quot;mongoose&quot;: &quot;^6.1.2&quot;,
      &quot;react-router&quot;: &quot;^6.2.1&quot;,
      &quot;react-router-dom&quot;: &quot;^6.2.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;concurrently&quot;: &quot;^6.5.0&quot;,
      &quot;dotenv&quot;: &quot;^10.0.0&quot;,
      &quot;nodemon&quot;: &quot;^2.0.15&quot;
    },
    &quot;proxy&quot;: &quot;http://localhost:5000&quot;
  }
  </code></pre>
  <p>When I run the code I get three errors in the browser:</p>
  <pre><code>Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
      at resolveDispatcher (react.development.js:1476)
      at useRef (react.development.js:1515)
      at BrowserRouter (index.tsx:140)
      at renderWithHooks (react-dom.development.js:14985)
      at mountIndeterminateComponent (react-dom.development.js:17811)
      at beginWork (react-dom.development.js:19049)
      at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
      at invokeGuardedCallback (react-dom.development.js:4056)
      at beginWork$1 (react-dom.development.js:23964)
  
  
  
  react-dom.development.js:20085 The above error occurred in the &lt;BrowserRouter&gt; component:
  
      at BrowserRouter (http://localhost:3000/static/js/bundle.js:43368:5)
      at App
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
  
  
  Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
      at resolveDispatcher (react.development.js:1476)
      at useRef (react.development.js:1515)
      at BrowserRouter (index.tsx:140)
      at renderWithHooks (react-dom.development.js:14985)
      at mountIndeterminateComponent (react-dom.development.js:17811)
      at beginWork (react-dom.development.js:19049)
      at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
      at invokeGuardedCallback (react-dom.development.js:4056)
      at beginWork$1 (react-dom.development.js:23964)
  </code></pre>
  <p>Navbar:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Navbar.css&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import { useState } from &quot;react&quot;;
  function Navbar() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    return (
      &lt;&gt;
        &lt;div className=&quot;navbar&quot;&gt;
          &lt;div className=&quot;leftSide&quot;&gt;
            &lt;Link to=&quot;/&quot;&gt;
              &lt;h2 id=&quot;header&quot;&gt;NeighborhoodMovements&lt;/h2&gt;
            &lt;/Link&gt;
            {isLoggedIn &amp;&amp; (
              &lt;Link to=&quot;/dashboard&quot;&gt;
                &lt;h2 id=&quot;nav-item&quot;&gt;Dashboard&lt;/h2&gt;
              &lt;/Link&gt;
            )}
          &lt;/div&gt;
          &lt;div className=&quot;rightSide&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default Navbar;
  </code></pre>
  <p>Home:</p>
  <pre><code>import React from &quot;react&quot;;
  function Home() {
    return &lt;h1&gt;Home&lt;/h1&gt;;
  }
  
  export default Home;
  </code></pre>
  <p>About:</p>
  <pre><code>import React from &quot;react&quot;;
  function About() {
    return &lt;h1&gt;About&lt;/h1&gt;;
  }
  
  export default About;
  </code></pre>
  <p>Not quite sure what the error is. I have read multiple guides on how to use React routers and they haven't really helped. I am trying to set up these routers to work alongside express.js. I have tried commenting out different dependencies, but the main error seems to lie with just the BrowserRouter. I am a high school student and greatly appreciate any help!</p>