使用 React Router 构建 ReactJS 后出现空白（白色）屏幕答案

【问题标题】：Got blank (white) screen after build ReactJS using React Router使用 React Router 构建 ReactJS 后出现空白（白色）屏幕
【发布时间】：2020-05-24 22:14:14
【问题描述】：

嘿，我已经使用 ReactJS 和 ReactRouter 构建了我的项目，但是当我将它部署到我的云服务器时，它只显示一个空白屏幕，我该怎么办？

这是我的 App.js 中的代码

import React from "react";
import Image from "react-bootstrap/Image";
import "./App.css";
import Header from "./components/Navbar.js";
import CenteredGrid from "./components/Vids.js";
import Warta from "./components/Warta.js";
import ListWarta from "./components/WartaPage.js";
import Berita from "./components/Berita.js";
import Visi from "./components/Visi.js";
import Jadwal from "./components/Jadwal.js";
import Footer from "./components/Footer.js";
import gambar from "./images/banner.jpg";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

export default function BasicExample() {
  return (
    <Router basename="/">
      <div>
        <Switch>
          <Route exact path="/">
            <App />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/listWarta">
            <WartaPage />
          </Route>
          <Route path="/beritaartikel">
            <BeritaArtikel />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function App() {
  return (
    <div className="App">
      <Header />
      <Image
        src={gambar}
        style={{
          marginTop: 80,
          width: "100%",
        }}
        fluid
      />
      <Warta />
      <Jadwal />
      <CenteredGrid />
      <Footer />
    </div>
  );
}

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

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

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

这是我的 package.json

"name": "gpib",
  "version": "0.1.0",
  "homepage": ".",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "express": "^4.17.1",
    "express-favicon": "^2.0.1",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

我已按照以下说明进行操作：https://create-react-app.dev/docs/deployment/ 还有这些：https://create-react-app.dev/docs/production-build/

控制台看起来像Dev Console Log

但我还是没明白，最糟糕的是，我不知道我哪里错了

请帮忙:(

【问题讨论】：

您好，发生了什么错误？有什么困难？
你好，没有错误，只是一个空白屏幕，我看到控制台也没有错误
DevTools 控制台也是空的吗？
这只是告诉我相信的警告，看起来像这样 DevTools 无法加载 SourceMap：无法为 chrome-extension 加载内容：//enlmiihbdlkpihokdgndjhahhkfmfcga/include.preload.js.map：HTTP 错误：状态码404，net::ERR_UNKNOWN_URL_SCHEME DevTools 无法加载 SourceMap：无法加载 chrome-extension://enlmiihbdlkpihokdgndjhahhkfmfcga/include.postload.js.map 的内容：HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME
我现在也在尝试将它部署到 ZEIT，但是我得到了错误，看起来像这样无法编译。 16:23:19.847 ./src/App.js 16:23:19.847 找不到模块：'react-bootstrap/Image'。确保已安装此软件包。 16:23:19.848 你可以通过运行安装这个包：yarn add react-bootstrap/Image。 16:23:19.873 错误命令失败，退出代码为 1。 16:23:19.873 信息请访问 yarnpkg.com/en/docs/cli/run 获取有关此命令的文档。 16:23:19.880 错误：命令“yarn run build”以 1 退出 16:23:21.734 使用“package.json”完成

标签： reactjs react-router

【解决方案1】：

这个问题在我上传到firebase或者surge的时候就解决了，一切都很顺利，你可以在这篇文章中学习https://create-react-app.dev/docs/deployment/

【讨论】：