GitHub gh-pages to work with the app domain name?

Question

I deployed a react app on gh-pages. The problem is that the URL, like https://username.io/react-app-name doesn't work. I'm running into a problem, because the app doesn't have a route to "react-app-name"...it has to be just "/" or "/users" etc. So by this kind of error loads a "not found" page. The not found has a go back home button, which takes me to the homepage "/", and from there the app works. How can I resolve this problem? Sorry for my bad English, hopefully you get it what I want to ask.

Answer 1

Are you using React Router? Having more info on your routing code and lib, or a link to your code would greatly help.

If you are indeed using React Router, I believe the basename property would help.

  <BrowserRouter basename="react-app-name">
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="users" element={<Users />} />
      </Route>
    </Routes>
  </BrowserRouter>

Answer 2

If I understand your question correctly, you might have missed setting the homepage property properly in your package.json file.

Here is how to do so:

1. Open your package.json file.
2. At the top level, give the homepage of your app in this format: https://<gitname>.github.io/<repo-name>.

Here is an example:

{
  "name": "react-app",
  "version": "0.1.0",
  "homepage": "https://gitname.github.io/react-app-name",
  ....

Your React app will be deployed at /react-app-name.

To learn more about how to deploy a React app to GitHub Pages, read this.

If that was indeed done correctly, you might want to look into specifying the basename prop in BrowserRouter that provides a base URL path for all the locations in the application (as suggested in ivanosevitch's answer).

---

If none of the above solves the issue, please elaborate on your problem so it is easier to understand where it is stemming from.