BrowserRouter Running Error - Invalid Hook Call

user_11752124 0
Viewed 2403

Here is my code:

import React from "react";
import ReactDOM from "react-dom";
import Navbar from "./components/Navbar/Navbar";
import "./App.css";
import Home from "./components/Home/Home";
import { BrowserRouter as Router, Route } from "react-router-dom";
import About from "./components/About/About";
const App = () => {
  return (
    <>
      <Navbar />
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </>
  );
};

export default App;

Here is my package.json:

{
  "name": "neighborhoodmovements",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "server": "nodemon server.js",
    "devStart": "nodemon server.js",
    "client": "cd client && npm start",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Brian Mason",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.2",
    "mongodb": "^4.2.2",
    "mongoose": "^6.1.2",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "concurrently": "^6.5.0",
    "dotenv": "^10.0.0",
    "nodemon": "^2.0.15"
  },
  "proxy": "http://localhost:5000"
}

When I run the code I get three errors in the browser:

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 <BrowserRouter> 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)

Navbar:

import React from "react";
import "./Navbar.css";
import { Link } from "react-router-dom";
import { useState } from "react";
function Navbar() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <>
      <div className="navbar">
        <div className="leftSide">
          <Link to="/">
            <h2 id="header">NeighborhoodMovements</h2>
          </Link>
          {isLoggedIn && (
            <Link to="/dashboard">
              <h2 id="nav-item">Dashboard</h2>
            </Link>
          )}
        </div>
        <div className="rightSide"></div>
      </div>
    </>
  );
}

export default Navbar;

Home:

import React from "react";
function Home() {
  return <h1>Home</h1>;
}

export default Home;

About:

import React from "react";
function About() {
  return <h1>About</h1>;
}

export default About;

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!

reactjs node.js
4 Answers

I'm not sure, but I noticed that you're using react-router version 6. I think you implemented that for version 5. In version 6 they changed a bit how we use react-router https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6

try this: **you should wrap your app with Router aka BrowserRouter 

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const App = () => {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

user_171786790

Try This

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import About from "./components/About/About";
const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;
user_105994500

I guess you are following any guide that worked on react-router-dom v5 but you are using v6 in your code. That creates the problem.

So If you wanna use v5:
Maybe making the Navbar inside the Router will work

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </>
  );
};

If you wanna use v6:
You need to wrap the Route with Routes and Navbar inside the Router Here's the v6 guide

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Routes>
      </Router>
    </>
  );
}

Please let me know if you still having issues.

user_31119130

This issue happened to me because of conflicts in react dependencies listed in package.json

Make sure there are no multiple package.json dependencies in your project by running npm ls in your project folder.

── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.2.0
├── @testing-library/user-event@13.5.0
├── react-dom@18.1.0
├── react-scripts@5.0.1
├── react@18.1.0
└── web-vitals@2.1.4

Removing react@13.2.0 from package.json and installing react-router-dom in the project folder resolved my issue.

user_176875000
Related