React js project on GitHub pages not showing

Question

I published my React project to GitHub pages and while I can see the favicon and main page title the actual project page is blank (nothing shows). I tried most fixes I could find but nothing worked.

This is my App.JS:

    import {BrowserRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';




function App() {
  return (
    <div className="App">
      <BrowserRouter>
        
        <Pages/>
    
      </BrowserRouter>
    </div>
  );
}

export default App;

and this is my Page routes:

    import React from "react";
import { Route, Routes } from "react-router-dom";
import MainPage from "../components/MainPage";
import SpaceProFigGridDetails from "../components/SpaceProFigGridDetails";
import SpaceProMain from "../components/SpaceProMain";
import SpaceProSpaceGDetails from "../components/SpaceProSpaceGDetails";

function Pages() {
  return (
    <Routes>
      <Route path="/" element={<MainPage />} />
      <Route path="/spaceProMain" element={<SpaceProMain />} />
      <Route
        path="/spaceprospacegdetails/:image"
        element={<SpaceProSpaceGDetails />}
      />
      <Route
        path="/spaceprofiggriddetails/:id"
        element={<SpaceProFigGridDetails />}
      />
    </Routes>
  );
}

export default Pages;

I read here (a different post) to add this to your project, however I might not be doing it correctly:

 <BrowserRouter basename={process.env.PUBLIC_URL}>
 {/* routes */}

If this solutions still works, can someone clarify pls? where exactly should I paste it? I tried on APPjs but my localhost "view" cashes.

You can see my project repository here

Thanks everyone for your help!

Cheers!

Answer 1

Thanks everyone for trying to help! I really appreciate everyone who shared ideas to help me fix this error.

After hourssssss working on this issue I found the solution.

Instead of:

import {BrowserRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';




function App() {
  return (
    <div className="App">
      <BrowserRouter>
        
        <Pages/>
    
      </BrowserRouter>
    </div>
  );
}

export default App;

THIS SOLVED THE ISSUE:

import {HashRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div className="App">
      <HashRouter>
        
        <Pages/>
    
      </HashRouter>
    </div>
  );
}
export default App;