2

I'm trying to publish my first React app using Vite, React-Router-Dom-v6.6.1 and Github Pages but for some reason the index.html file is not detected and the "404 error" is being shown, however this error is shown on a page added by me to deal with possible errors and there is an option to return to the homepage ; however this homepage is generated from the reading of the index.html file and respective javascript. But at this moment the browser is already able to interpret the index.html file and everything behaves similarly to the development environment, without errors. That is, for some reason the browser does not identify the index.html file on its first load (I think), even though the path pointed in base: "/presentation/" is pointing to the right place.

Below are the files I find most relevant, the link to my `Github Pages` (where this issue is happening) as well as a link to a screen recording I made of this situation so you can better understand what I'm trying to explain.

Github Page in question:

Problem screen recording video:

VITE files

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import "./index.css";

// Redux Toolkit
import { Provider, useSelector } from "react-redux";
import store from "./reduxTlk/store";

/* existing imports */
import Root from "./routes/root";
import ErrorPage from "./error-page";
import Home from "./routes/home";
import WeatherStatus from "./routes/weatherStatus";
import { weatherLoader } from "./components/projects/ipma/TempTable";

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Root />} errorElement={<ErrorPage />}>
        <Route index element={<Home />} />
        <Route
          path="WeatherStatus"
          element={<WeatherStatus />}
          loader={weatherLoader}
        />
      </Route>
    </>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.7",
    "@reduxjs/toolkit": "^1.9.1",
    "dompurify": "^2.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.6.1"
  },
  "homepage": "https://cristianolm.github.io/presentation/",
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/presentation/",
  plugins: [react()],
});

dist/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/presentation/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cristiano Martins</title>
    <script type="module" crossorigin src="/presentation/assets/index.6cda9410.js"></script>
    <link rel="stylesheet" href="/presentation/assets/index.85f54fc4.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

Firstly, I tried to build for production with the base line: "/presentation/, in vite.config.js, then I tried to do this same process without this line and finally I added that line again, but I added it to the package. json the line homepage": "https://cristianolm.github.io/presentation/,.

And of course I tried to search for another solution on google, but without success.

Cristianolm
  • 25
  • 7
  • Does this help answer your question? https://stackoverflow.com/questions/71984401/react-router-not-working-with-github-pages/71985764#71985764 – Drew Reese Feb 06 '23 at 08:31
  • I had already seen this post, I just didn't use "HashRouter", because in the latest version React-Router advises using "createBrowserRouter". – Cristianolm Feb 06 '23 at 09:39
  • The RRD docs have just about always said that, but [Github hosting requires using a `HashRouter`](https://create-react-app.dev/docs/deployment/#github-pages) from my understanding. It's more of a "Use the `BrowserRouter` unless you have an edge-case use case and you know what you are doing." sort of thing. – Drew Reese Feb 06 '23 at 09:42
  • Hmmmm... Well that could be it. I think I'll try other hosting services to see if I come to a better conclusion. But that could very well be it. But when I've tested more options I'll come here to say something. Now I'm going to rest a little, because I'm already many hours back from this. But I promise I'll come here to update. – Cristianolm Feb 06 '23 at 09:53
  • Hello. I've been back from this and other errors and I realized that the answer that the "Tachibana Shin" of re-invoicing the routes (in my case) resulting from the addition of `path="/presentation"` in "Route" solved the problem. As for the other hosting services, I tried the Vercel website, but there was an error related to the routes, but I confess that I didn't invest a lot of time trying to solve this problem, as I was trying to solve the Github Pages problem. But still thanks for the help. – Cristianolm Feb 09 '23 at 04:13
  • I think Tachibana-shin's answer only masks the issue. I suspect what you really need is to simply specify the `basename` prop on the router for the directory the app is hosted in, i.e. `createBrowserRouter(routes, { basename: "/presentation" })`. Their answer *effectively* did this, but not quite in the idiomatic RRD way. – Drew Reese Feb 09 '23 at 04:54
  • After all this time, I noticed that you are right in your answer. I redid my entire portfolio for TypeScript and tried to solve this Github Pages hosting issue again, and I noticed that you were right, however, it only worked for me when I indicated the name of the repository (where the github page would take place) in both places: `vite .config.ts` with ` base: "/presentation",` and in ``createBrowserRouter` with `{ basename: "/presentation" }`. – Cristianolm Apr 21 '23 at 10:50

2 Answers2

1

I suspect you may only need to additionally specify/indicate that the router is running from a sub-directory, beyond what is already specified in the package.json and the vite.config files. You can specify a basename prop on the router that matches the directory the app is hosted from and all routes and links will work relative to this location.

basename

The basename of the app for situations where you can't deploy to the root of the domain, but a sub directory.

createBrowserRouter(routes, {
  basename: "/app",
});

For the host: "https://cristianolm.github.io/presentation"

Example:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/" // <-- "/presentation"
      element={<Root />}
      errorElement={<ErrorPage />}
    >
      <Route
        index // <-- "/presentation"
        element={<Home />}
      />
      <Route
        path="WeatherStatus" // <-- "/presentation/WeatherStatus"
        element={<WeatherStatus />}
        loader={weatherLoader}
      />
    </Route>
  ),
  { basename: "/presentation" }
);
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • I managed to solve the problem, but the name of your repository must be indicated in both places (and not just in one). Those locations are the `vite .config.ts` file (as I indicated in my question) and the Router `createBrowserRouter` (as indicated in this answer). Thanks. – Cristianolm Apr 21 '23 at 11:00
  • @Cristianolm Yes, sorry, I did intend for that to mean "... you may only *additionally* need to ...". I'll edit to make this more clear. Thanks. – Drew Reese Apr 21 '23 at 16:10
-2

this is not really vite related i think you understand:

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
-     <Route path="/" element={<Root />} errorElement={<ErrorPage />}>
+     <Route path="/presentation" element={<Root />} errorElement={<ErrorPage />}>
        <Route index element={<Home />} />
        <Route
          path="WeatherStatus"
          element={<WeatherStatus />}
          loader={weatherLoader}
        />
      </Route>
    </>
  )
);

it looks like this: https://cristianolm.github.io/presentation/ the actual route will be /presentation not /

Tachibana Shin
  • 2,605
  • 1
  • 5
  • 9
  • 1
    I don't think it's Vite-related either, more like React Router. But I don't think that can be it, because "/presentation" is the name of the repo, hence having written "base: "/presentation/" in `vite.config.js`. But if you click on the video I put associated with "Problem screen recording video:" you'll be able to see more clearly that "/presentation" is the name given to the repo on github, and within that repo, the branch taken as a reference for GitHub Pages is called `react`, which within itself has the `index.html` file to be loaded (which is the one at location "/"). – Cristianolm Feb 06 '23 at 09:43
  • you are not understanding the problem react-router will get path route from location.href you understand but when you go to `https:///presentation` the route path is `/presentation` however your app set here (`index.html`) only serves the route path as `/` and the fact you want it to run that way means that the implementation needs to set `/presentation` as `path root`. try it here is the solution for you – Tachibana Shin Feb 06 '23 at 12:12
  • Hello, I've been trying several approaches and you're actually right. I I initially thought that it was enough to indicate "base:/presentation/" and the SPA should work normally, but I really had to make the change you suggested. Thank you very much. By the way, however, I managed to solve other problems such as the 404 error when refreshing, but this problem is completely resolved on the computer, but on the mobile phone if I leave the SPA and go back to the SPA again, the 404 error is displayed. Do you know anything about this? – Cristianolm Feb 09 '23 at 04:05
  • that's because the paths don't really exist you can create a `404.html` file in `public` and use any method to redirect back to `index.html` for example `` or use javascript – Tachibana Shin Feb 09 '23 at 04:28
  • I used Javascript, as I resorted to a repository for SPA on github, called "spa-github-pages" from a user called "rafgraph", which uses this approach. But I'm going to take a closer look at this repository and your suggestion, because I don't think I'm missing much, as this error only happens on my cell phone. But anyway, if I can't solve the problem within a few days I'll make a new post here on stackoverflow. Thanks. – Cristianolm Feb 09 '23 at 04:54