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"
    ]
  }
}

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