1

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!

G6ix
  • 164
  • 1
  • 8
  • 2
    Does this help answer your question? https://stackoverflow.com/a/71985764/8690857 – Drew Reese Sep 28 '22 at 22:04
  • @monim That link is broken, but effectively a duplicate. – Drew Reese Sep 28 '22 at 22:18
  • I want to first mention, I believe your BrowserRouter component should wrap your App component, rather than around your Pages component. On top of that, it seems when the app is initialized and run it defaults to the /nasa-pro path. You should either set a route to handle that /nasa-pro path or remove that /nasa-pro slug from your homepage domain provided in your package.json, as shown in the linked answer in Drew's comment – Musilix Sep 28 '22 at 22:18
  • Actually, I take back what I said about the BrowserRouter component. That's fine, my b. – Musilix Sep 28 '22 at 22:19
  • @Musilix the `"/nasa-pro"` is the name of the github repo, as the `"homepage"` all the routes in the app will be relative from it, so no route needs to match it other `"/"` which is assumed. – Drew Reese Sep 28 '22 at 22:21
  • Does this answer your question? [React app showing blank page after deployment](https://stackoverflow.com/questions/73740071/react-app-showing-blank-page-after-deployment) – monim Sep 28 '22 at 22:24
  • @Drew I'm not sure I follow. Running it locally, there are no Route components that handle the /nasa-pro path. So it doesn't render any component. it doesn't seem to be interpreting the Route component's paths relative to that /nasa-pro root path. – Musilix Sep 28 '22 at 22:25
  • 1
    @Musilix Running locally isn't the same as running from a server. I'd be willing to bet if you added a `basename="/nasa-pro"` to the router and manually navigate to `"/nasa-pro"` locally you'll see the `MainPage` component rendered. This is probably about as close as you'll get to replicating running from the github page locally. – Drew Reese Sep 28 '22 at 22:29
  • @Drew You're absolutely right. Didn't realize that was a prop on the BrowserRouter. Also, is it just an implicit behavior for github pages to serve a project up under a subdirectory = the github repo name? – Musilix Sep 28 '22 at 22:47
  • @Musilix That is my understanding. – Drew Reese Sep 28 '22 at 22:59
  • @DrewReese I tried the solution in the comment link but no success. I replaced BrowserRoute for HasRouter in index.js - didnt work. I also tried replacing the BrowserRoute from my App.js for HasRouter - didnt work Finally, I tried adding a path name to my – G6ix Sep 29 '22 at 00:44
  • @monim I tried it and had no luck. I tested the last comment on the link you provided, comment by @ punjira, suggesting to add . I'm not sure if i got the idea correct but I tried the following combo. Replaced BrowserRouter for HashRouter in index.js, then added basename="/myRepositoryName"> and It didn;t work. Would you suggest something different? Thanks for your help. – G6ix Sep 29 '22 at 00:51
  • @Musilix, thanks for the suggestions. Can you clarify what you mean by "remove that /nasa-pro slug from your homepage domain "? I'm new to React and my terminology is a bit weak. – G6ix Sep 29 '22 at 00:54
  • I also tried navigating to "my url + public/index.html" (saw a suggestion on a youtube vid) but that also didnt work. – G6ix Sep 29 '22 at 01:00
  • 1
    @G6ix I was just referring to the homepage field you had set in your package.json. It had a subdirectory of “/nasa-pro”. Usually the root of an app is just simply “/“ but as Drew pointed out, GitHub Pages deploys your app under a subdirectory = your GitHub project name. In this case, nasa-pro. So because of that, you should instead set a basename prop on your BrowserRouter component equal to “/nasa-pro” and everything should work fine. At least that’s what happened when I cloned your repo and did that. – Musilix Sep 29 '22 at 06:46
  • @Musilix I tried your suggesting but in combination with changes I made in index.js. The substitution of BrowserRouter for HashRouter in App.js alone fixed the issue for me. Thanks a lot for your help! – G6ix Sep 29 '22 at 13:06

1 Answers1

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;
G6ix
  • 164
  • 1
  • 8
  • Did you end up trying the approach to add a basename prop to the BrowserRouter component? Like ...? – Musilix Sep 29 '22 at 06:49
  • @Musilix yes but in combination with other strategies. I have a feeling from what I read that github can't read "browserRouter" but hashrouter it does.... not sure why... Thanks again! – G6ix Sep 29 '22 at 13:08