React app only displays the background color when deployed to github pages

Question

I deployed a react app to github pages, but it is only showing my background color and none of the actual components. I followed this guide (https://create-react-app.dev/docs/deployment/#github-pages) to run the terminal commands and to insert the correct code in my json file. I don't get any errors on deploy and when I check the console of my page it doesn't show any errors.

I have my homepage as the github pages link set right under the name.

Here are my scripts in my package.json

  "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"
  },

Here is my app.js

import React from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';

function App() {
  return (
    <React.Fragment>
      <Router>

        <Switch>
          <Route path='/' exact component = {Home} />
        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App;

Is something wrong with my ReactDOM? Everything works locally. I'm not sure what the issue could be.

Answer 1

either at the Route path, or once at Router basename itself, you should add process.env.PUBLIC_URL as pointer to your address

  <Router basename={process.env.PUBLIC_URL}>