title: Got blank (white) screen after build ReactJS using React Router
body: <p>Hey I'm already build my project using ReactJS with ReactRouter, but when I deploy it to my cloud server, it only brings up a blank screen, what should I do?</p>
  
  <p>Here's the code in my App.js</p>
  
  <pre><code>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 (
      &lt;Router basename="/"&gt;
        &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/"&gt;
              &lt;App /&gt;
            &lt;/Route&gt;
            &lt;Route path="/about"&gt;
              &lt;About /&gt;
            &lt;/Route&gt;
            &lt;Route path="/listWarta"&gt;
              &lt;WartaPage /&gt;
            &lt;/Route&gt;
            &lt;Route path="/beritaartikel"&gt;
              &lt;BeritaArtikel /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Header /&gt;
        &lt;Image
          src={gambar}
          style={{
            marginTop: 80,
            width: "100%",
          }}
          fluid
        /&gt;
        &lt;Warta /&gt;
        &lt;Jadwal /&gt;
        &lt;CenteredGrid /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  function About() {
    return (
      &lt;div className="App"&gt;
        &lt;Header /&gt;
        &lt;Visi /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  function WartaPage() {
    return (
      &lt;div className="App"&gt;
        &lt;Header /&gt;
        &lt;ListWarta /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  function BeritaArtikel() {
    return (
      &lt;div className="App"&gt;
        &lt;Header /&gt;
        &lt;Berita /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>and here's my package.json</p>
  
  <pre><code>"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": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  </code></pre>
  
  <p>i've follow these instruction: <a href="https://create-react-app.dev/docs/deployment/" rel="nofollow noreferrer">https://create-react-app.dev/docs/deployment/</a>
  and these too: <a href="https://create-react-app.dev/docs/production-build/" rel="nofollow noreferrer">https://create-react-app.dev/docs/production-build/</a></p>
  
  <p>Here's the console look's like <a href="https://i.stack.imgur.com/dimKz.png" rel="nofollow noreferrer">Dev Console Log</a></p>
  
  <p>but I still didn't get the point, and the worst part is, I don't know where I went wrong</p>
  
  <p>please help :(</p>