React Router. dispatcher is null

Question

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

and

Uncaught TypeError: dispatcher is null

This is my Layout:

index.js:

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

App.js:

import Layout from "./components/Layout/Layout";

function App() {
    return (
        <div className="App">
            <Layout />
        </div>
    );
}

export default App;

Layout.js:

import { Route, Routes, Outlet } from "react-router";
import Header from "./Header/Header";

function Layout(){
    return(
        <div id="layout">
            <Header />
            
            <Routes>
                <Route path="/" element={<b>Home page</b>} />
                <Route path="trade" element={<b>Trade page</b>} />
                <Route path="/forum" element={<b>Forum page</b>} />
                <Route path="/about" element={<b>About page</b>} />
            </Routes>

        </div>
    );
}

export default Layout;

package.json:

{
  "name": "theory_workaround",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.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"
    ]
  }
}

Overwrite

I don't see any overt issues in the code you've shared, and I can't reproduce any issues with it in this codesandbox. I suspect the issue is outside this code. Can you provide a more complete and comprehensive minimal reproducible example and your package.json file? – Genipap

@DrewReese. I have added package.json content to my answer. I think, this probably could be an outdated version of some npm package (like react-dom or something like this...)? – Overwrite

I just bumped all the dependencies in the codesandbox I linked to the same versions as specified in your package.json file and still don't see an issue. Can you fork my sandbox and then add more of your real code to see if something else is breaking it? – Genipap

Ok, I will add code to your sandbox, but in the evening, because I'm not able to dump code right now. Ok? – Overwrite

And one more question: Where are you from? Cause I'm from Ukraine and don't know your timezone – Overwrite

I was facing this issue with React 18.0.0. As soon as I upgraded to v18.0.2 this error was gone. – Diluvial

I'm UTC-7. Just fork and update a sandbox when you can and ping me here in a comment and I'll check when available. – Genipap

Answer 1

this happen to me today, I solve it by reinstall material ui since it was the one cause the issue whenever am using MUI component at firm I install mui with this command

npm install mui

Then i had to unistall it with this command

npm uninstall mui

the i install using the get started from mui docs with this command

npm install @mui/material @emotion/react @emotion/styled

EDIT: and another thing i was also getting the error when am using MUI icons so i actually fix it my install mui icons with the following command

npm install @mui/icons-material

Also for your case: You may have a mismatch version between React and React DOM installed you may use this command to download the lasted of both react and react DOM

npm install react@latest react-dom@latest

also update your react-router-dom to the lastest version

npm install react-router-dom@latest

Thanks hope it will help someone

Stylographic

yarn add react@latest react-dom@latest react-router-dom@latest worked for me. thanks! – Boring

Answer 2

This helped for me, Insert

import { Route, Routes, Outlet } from "react-router";

after

import Header from "./Header/Header";

I therefore should look like this

import Header from "./Header/Header";
import { Route, Routes, Outlet } from "react-router";

Gustaf

Answer 3

You have mismatching versions of react and the render dependencies like React Router. This mostly the issue when people tend to be running a legacy code and installing new versions of dependencies. I would suggest and this is not and expert advice, but i strongly believe it should solve it

npm update

or delete your node modules and package-lock.json and run

npm install

Rosen

Answer 4

Just faced this issue and it was just because I was using react-bootstrap but then I didn't include it in the package.json file, then after that I did a clean install with these commands and it solved the issue.

rm -rf node_modules
npm cache clean --force
npm install

Rubber

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Intermeddle

Answer 5

1. Use react-router-dom not react-router.
2. Have you even imported BrowserRouter from react-router (react-router-dom should be) in index.js?

Kumler

Sure I have imported it – Overwrite

Welcome to StackOverflow Vivaan Kumar! Please use the comments to ask for clarification. Answers should contain the solution to the problem at hand. – Ligni