运行 npm start 时发出我的静态 JS 文件答案

【问题标题】：My Static JS files Are Emitted when running npm start运行 npm start 时发出我的静态 JS 文件
【发布时间】：2022-02-17 03:37:11
【问题描述】：

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 start

    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

我尝试了构建选项，但它没有，我的反应应用程序不会在浏览器中显示任何内容我真的被困在这段代码中非常感谢任何帮助 TIA。

【问题讨论】：

标签： node.js reactjs angular compiler-errors npm-start

【解决方案1】：

检查你的 React Router 的版本，它可能是 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;

【讨论】：