CODEWITHSUNDEEP
reactjsreact-hooksreact-router
Andrew Interst
Andrew Interst

Reputation: 177

The above error occurred in the <BrowserRouter> component, Invalid hook call

I'm trying to use a react-router, after using the library some problems begin, I've already tried to write different code, I found it ready-made on the Internet, but still something is wrong (even reset Windows). This code is taken from the official react-router documentation, did everything as written (https://reactrouter.com/docs/en/v6/getting-started/installation) Here is the errors:

Warning: 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. printWarning @ react.development.js:207

Uncaught TypeError: Cannot read properties of null (reading 'useRef')

at useRef (react.development.js:1628:1)

at BrowserRouter (index.tsx:151:1)

at renderWithHooks (react-dom.development.js:16175:1)

at mountIndeterminateComponent (react-dom.development.js:20913:1)

at beginWork (react-dom.development.js:22416:1)

at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)

at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)

at invokeGuardedCallback (react-dom.development.js:4274:1)

at beginWork$1 (react-dom.development.js:27405:1)

at performUnitOfWork (react-dom.development.js:26513:1)

The above error occurred in the component:

at BrowserRouter (http://localhost:3001/static/js/bundle.js:45400:5)

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. logCapturedError @ react-dom.development.js:18572

4 errors with invalid hooks, 3 errors with Uncaught TypeError: Cannot read properties of null (reading 'useRef') and The above error occurred in the <BrowserRouter> component appear in the console once

Here is my code:

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>
);

src./App.js

import React from "react";
import ReactDOM from "react-dom";
import {Routes,Route, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        <Link to="/about">About</Link>
      </nav>
    </>
  );
}

function About() {
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>
          That feels like an existential question, don't you
          think?
        </p>
      </main>
      <nav>
        <Link to="/">Home</Link>
      </nav>
    </>
  );
}
export default App;

and package.json

{
  "name": "ao-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test", 
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I did everything as it is written in the documentation (https://reactrouter.com/docs/en/v6/getting-started/installation)

Upvotes: 2

Views: 50125

Answers (4)

Pti Insafstudent
Pti Insafstudent

Reputation: 11

After installing react-router-dom using npm i react-router-dom just restart the app in my case, I solved it this way

Upvotes: 1

Full Dev Man
Full Dev Man

Reputation: 59

I tested all above, but this below worked for me:

npm install --save react-router-dom@latest

Upvotes: 2

Ayush Kumar Bhadani
Ayush Kumar Bhadani

Reputation: 71

I was facing the same issue. Just uninstall the version 6 of the react-router-dom and install it like

npm i react-router-dom

This worked for me!

Upvotes: 6

Andrew Interst
Andrew Interst

Reputation: 177

The problem was that I downloaded the library not to the project itself, but to the project folder, which is why I had package.json inside the project and in the project folder itself, in which the react-router was installed, that is, before downloading the library I forgot to go to the project itself via cd

Upvotes: 11

Related Questions