"调度程序为空"错误，同时在 React 中使用 react-dom-router 和 BrowserRouter、路由器、Route for a NavBar

Question

我试图创建一个有几个嵌套组件的头，其中一个是NavBar组件。我现在正试图通过使用BrowserRouter,Routes和Route使NavBar项目工作，我有以下代码:

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

每当我刷新时，就会抛出一个错误，上面写着"dispatcher is null"，根据我个人的AI支持，还有一些行与错误不直接相关。我也不知道为什么我的react-router-dom包没有显示在依赖项中。

我安装了最新版本的react-router-dom，此外，我尝试了小的代码更改，如将<Route path="/" element={<Home />} />更改为<Route path="/" element={Home} />，因为据我所知，我没有创建代表NavBar项的组件，但随后出现了不同的错误。

有没有其他人遇到过类似的问题并知道解决方案?

Answer 1

Header中的Link组件应该在中呈现路由器提供的路由上下文。将BrowserRouter在ReactTree中向上移动。在index.js文件中导入BrowserRouter，并包装App组件，这样Header和AppRoutes都可以使用路由上下文。

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>
);
};

确保你已经正确地将router库安装为依赖项。在终端cd下进入根工程目录，执行以下命令安装react-router-dom和更新package.json文件

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