React js github deploy

Question

I deployed my react js project on github using gh-pages. However, I only see a white blank page. I inspected and my the page was index.html... Why is this happening and how to fix it?

My package.json file

{
  "homepage": "/my-music-journey",
  "name": "my-music-journey",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@google-cloud/storage": "^5.1.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "aos": "^3.0.0-beta.6",
    "firebase": "^7.17.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

My app.js file

import React from "react";
import { Landing } from "./Pages/Landing";
import { Nav } from "./Components/Nav";
import { View } from "./Pages/View";
import { Upload } from "./Pages/Upload";
import AOS from "aos";
import "aos/dist/aos.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import firebase from "./firebase";

AOS.init({
  duration: 2000,
});

function App() {
  return (
    <Router>
      <Route path="/" exact component={Nav} />
      <Route path="/" exact component={Landing} />
      <Route path="/view" exact component={View} />
      <Route path="/upload" exact component={Upload} />
    </Router>
  );
}

export default App;

Currently deployed website

Network tab

Answer 1

Make sure you wrap the top-level component with HashRouter instead of the normal BrowserRouter. GitHub Pages does not work well with BrowserRouter.

Untested, this should work...

import React from "react";
import { Landing } from "./Pages/Landing";
import { Nav } from "./Components/Nav";
import { View } from "./Pages/View";
import { Upload } from "./Pages/Upload";
import AOS from "aos";
import "aos/dist/aos.css";
import { HashRouter as Router, Route } from "react-router-dom";
import firebase from "./firebase"; // not needed hey?

AOS.init({
  duration: 2000,
});

function App() {
  return (
    <Router>
      <Route path="/" exact component={Nav} />
      <Route path="/" exact component={Landing} />
      <Route path="view" exact component={View} />
      <Route path="upload" exact component={Upload} />
    </Router>
  );
}

export default App;