CODEWITHSUNDEEP
reactjsreact-routerweb-deploymentgithub-pagesvite
Cristianolm
Cristianolm

Reputation: 45

Error 404 on Github Pages using React Router v6.6.1 and Vite

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.

Upvotes: 3

Views: 3097

Answers (2)

Drew Reese
Drew Reese

Reputation: 203322

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" }
);

Upvotes: 2

Tachibana Shin
Tachibana Shin

Reputation: 3908

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 /

Upvotes: -2

Related Questions