'dispatcher is null' error while working with react-dom-router and BrowserRouter, Routers, Route for a NavBar in React

I'm trying to create a header that has several nested components, one of them being the NavBar component. I'm now trying to make the NavBar items work by using BrowserRouter, Routes, and Route and I have the following code:

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

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

App.js

import "./App.css";
import { Header } from "./Components/Header/Header";
import { AppRoutes } from "./routes";

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

export default App;

Header.js

import React from "react";
import { NavBar } from "./NavBar/NavBar";

export const Header = (props) => {
  return (
    <header>
      <NavBar />
    </header>
  );
};

NavBar.js

import React from "react";
import { Link } from "react-router-dom";

export const NavBar = (props) => {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/news">News</Link>
      </li>
      <li>
        <Link to="/warehouse-finds">Warehouse Finds</Link>
      </li>
      <li>
        <Link to="/genres">Genres</Link>
      </li>
      <li>
        <Link to="/releases">Releases</Link>
      </li>
      <li>
        <Link to="/equipment">Equipment & More</Link>
      </li>
    </ul>
  );
};

routes.js

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

const Home = () => <h2>Home</h2>;
const News = () => <h2>News</h2>;
const WarehouseFinds = () => <h2>WarehouseFinds</h2>;
const Genres = () => <h2>Genres</h2>;
const Releases = () => <h2>Releases</h2>;
const EquipmentAndMore = () => <h2>Equipment & More</h2>;

export const AppRoutes = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/news" element={<News />} />
        <Route path="/warehouse-finds" element={<WarehouseFinds />} />
        <Route path="/genres" element={<Genres />} />
        <Route path="/releases" element={<Releases />} />
        <Route path="/equipment" element={<EquipmentAndMore />} />
      </Routes>
    </BrowserRouter>
  );
};

package.json

{
  "name": "osc-hazard-vinyl-store",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "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"
    ]
  }
}

Whenever I refresh, an error gets thrown that says "dispatcher is null", with some more lines that, according to my personal AI support, don't directly correlate with the error. Also I don't know why my react-router-dom package doesn't show up in the dependencies.

I have the latest version of react-router-dom installed, furthermore I've tried small code changes like changing <Route path="/" element={<Home />} /> to <Route path="/" element={Home} /> since, to my understanding, I haven't created components that represent the NavBar items but then a different error appeared.

Has anyone else had a similar problem and knows a solution to that?

The Link components in the Header should be rendered within a routing context provided by a router. Move the BrowserRouter higher up in the ReactTree. Import BrowserRouter in the index.js file and wrap the App component so both the Header and AppRoutes have a routing context available to them.

index.js

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

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

routes.js

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

const Home = () => <h2>Home</h2>;
const News = () => <h2>News</h2>;
const WarehouseFinds = () => <h2>WarehouseFinds</h2>;
const Genres = () => <h2>Genres</h2>;
const Releases = () => <h2>Releases</h2>;
const EquipmentAndMore = () => <h2>Equipment & More</h2>;

export const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/news" element={<News />} />
      <Route path="/warehouse-finds" element={<WarehouseFinds />} />
      <Route path="/genres" element={<Genres />} />
      <Route path="/releases" element={<Releases />} />
      <Route path="/equipment" element={<EquipmentAndMore />} />
    </Routes>
  );
};

Ensure you've correctly installed the router library as a dependency. In the terminal cd into the root project directory and run the following command to install react-router-dom and update the package.json file.

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