Question 285408 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I am getting error dispatcher is null when trying to implement simple routing using react router

When I add routing with React Router to my React app, it throws error and shows warning:

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.

Error:

dispatcher is null
useRef@http://localhost:3000/static/js/bundle.js:9298:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:5616:55
renderWithHooks@http://localhost:3000/static/js/bundle.js:30071:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:33357:17
beginWork@http://localhost:3000/static/js/bundle.js:34653:20
callCallback@http://localhost:3000/static/js/bundle.js:19663:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:19707:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:19764:35
beginWork$1@http://localhost:3000/static/js/bundle.js:39638:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:38885:16
workLoopSync@http://localhost:3000/static/js/bundle.js:38808:26
renderRootSync@http://localhost:3000/static/js/bundle.js:38781:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:38175:78
workLoop@http://localhost:3000/static/js/bundle.js:46202:46
flushWork@http://localhost:3000/static/js/bundle.js:46180:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:46417:25

index.js:

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


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


reportWebVitals();

App.js:

import logo from './logo.svg';
import './App.css';
import ListUsersComponent from './components/ListUsersComponent';
import HeaderComponent from './components/HeaderComponent';
import FooterComponent from './components/FooterComponent';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
    <BrowserRouter>
      <div className='container'>
        <HeaderComponent />

        <div className="container">
          <Routes>
            <Route path='/' element={<ListUsersComponent />} />
            <Route path='/admin' element={<ListUsersComponent />} />
          </Routes>
        </div>

        <FooterComponent />
      </div>
    </BrowserRouter>
  </div>
  );
}

export default App;

package.json:

{
  "name": "react-fe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.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"
    ]
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Issue was in dependencies I guess. I removed nodes_modules and run npm install. I also added router dependency to package.json


  2. 0

    It looks like you’re running into a common issue with React Router. The error you’re seeing, "Invalid hook call," typically happens when React Router components are nested inside another BrowserRouter component.

    In your App.js file, you have a BrowserRouter wrapping the entire component, and then another BrowserRouter inside the component. This can cause conflicts.

    To fix this, you should have only one BrowserRouter at the top level, usually in your index.js file. Remove the BrowserRouter from the App component in App.js.

    Here’s the modified code:

    // index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

reportWebVitals();

    And in your App.js:

    // App.js
import React from 'react';
import HeaderComponent from './components/HeaderComponent';
import FooterComponent from './components/FooterComponent';
import ListUsersComponent from './components/ListUsersComponent';
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <div className='container'>
        <HeaderComponent />

        <div className="container">
          <Routes>
            <Route path='/' element={<ListUsersComponent />} />
            <Route path='/admin' element={<ListUsersComponent />} />
          </Routes>
        </div>

        <FooterComponent />
      </div>
    </div>
  );
}

export default App;

    Give this a try, and it should resolve the hook-related issue you’re facing. If you encounter any more issues or have further questions, feel free to ask!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search