我的静态JS文件是在运行npm启动时发出的

Question

This is my React Javascript file
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="/">
My Web
</a>
</div>
<div>
<a href="/cart">Cart</a>
<a href="/signin">Sign In</a>
</div>
</header>
<main>
<Route path="/product/:id" component={ProductScreen}></Route>
<Route path="/" component={HomeScreen} exact></Route>
</main>
<footer className="row center">All right reserved</footer>
</div>
</BrowserRouter>
);
}
export default App;

这是运行时出现的错误(我使用react router dom构建静态页面(npm启动

assets by path static/js/*.js 1.56 MiB
asset static/js/bundle.js 1.56 MiB [emitted] (name: main) 1 related asset
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.93 KiB [emitted] 1 related asset
asset index.html 1.8 KiB [emitted]
asset asset-manifest.json 458 bytes [emitted]
runtime modules 31.3 KiB 15 modules
modules by path ./node_modules/ 1.4 MiB 103 modules
modules by path ./src/ 35.1 KiB
modules by path ./src/*.js 9.44 KiB
./src/index.js 1.81 KiB [built] [code generated]
+ 3 modules
modules by path ./src/*.css 9.22 KiB
./src/index.css 2.72 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 6.49 KiB [built] [code generated]
modules by path ./src/screens/*.js 9.9 KiB
./src/screens/HomeScreen.js 1.87 KiB [built] [code generated]
./src/screens/ProductScreen.js 8.03 KiB [built] [code generated]
modules by path ./src/components/*.js 6.56 KiB
./src/components/Product.js 2.92 KiB [built] [code generated]
./src/components/Rating.js 3.64 KiB [built] [code generated]
webpack 5.69.0 compiled successfully in 13380 ms

我尝试了构建选项，但没有，我的react应用程序也不会在浏览器中显示任何内容。我真的被困在这个代码中，真的很感激任何帮助TIA。

Answer 1

检查React路由器的版本，它可能是v6。如果是这样，你应该这样做，

import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="/">
My Web
</a>
</div>
<div>
<a href="/cart">Cart</a>
<a href="/signin">Sign In</a>
</div>
</header>
<Routes>
<Route path="/product/:id" element={<ProductScreen />}></Route>
<Route path="/" element={<HomeScreen />} index></Route>
</Routes>
<footer className="row center">All right reserved</footer>
</div>
</BrowserRouter>
);
}
export default App;