node.js版本6中的分页链接和路由问题

Question

我正在制作一款棋盘游戏应用，当我将其与最新版本的node结合时，链接和路由停止工作。我在这里看到了最后一个版本的例子，但它不起作用，搜索，但我找到了旧版本的分页例子。谁能告诉我，我哪里做错了?非常感谢!

import "./App.css";
//import { getAllCategories } from "./utils/api.js";
// import { getUsername } from "./utils/api.js";
//import { useState, useEffect } from "react";
import { Home } from "./pages/home/home.js";
import { Reviews } from "./pages/review.js";
import { About } from "./pages/aboutUs";
import { Router, Routes, Route } from "react-router-dom";
import React from "react";
import { StyledLink } from "./styles";
function App() {
return (
<section className="App">
<Router>
<Routes>
<StyledLink to="/">Home</StyledLink>
<StyledLink to="/aboutUs">About us</StyledLink>
<StyledLink to="/review">Review</StyledLink>
<Route path="/" element={<Home />} />
<Route path="aboutUs" element={<About />} />
<Route path="review" elemnent={<Reviews />} />
</Routes>
</Router>
</section>
);
}
export default App;

我在控制台中看到的错误是:

bundle.js:40315 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

上述错误发生在组件中:

Answer 1

文档说:

使用HTML5历史API的BrowserRouter A。(replaceState和popstate事件)来保持你的UI与URL。

来源:https://v5.reactrouter.com/web/api/BrowserRouter

Router所有路由器组件的通用底层接口。通常情况下，应用程序会使用其中一个高级路由器:BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

来源:https://v5.reactrouter.com/web/api/Router

import "./App.css";
//import { getAllCategories } from "./utils/api.js";
// import { getUsername } from "./utils/api.js";
//import { useState, useEffect } from "react";
import { Home } from "./pages/home/home.js";
import { Reviews } from "./pages/review.js";
import { About } from "./pages/aboutUs";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React from "react";
import { StyledLink } from "./styles";
function App() {
return (
<section className="App">
<Router>
<Routes>
<StyledLink to="/">Home</StyledLink>
<StyledLink to="/aboutUs">About us</StyledLink>
<StyledLink to="/review">Review</StyledLink>
<Route path="/" element={<Home />} />
<Route path="aboutUs" element={<About />} />
<Route path="review" elemnent={<Reviews />} />
</Routes>
</Router>
</section>
);
}
export default App;