英文:
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.
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}
/>
</>
)
);
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.
英文:
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.
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.
答案1
得分: 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.
basenameThe 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" }
);
英文:
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" }
);
答案2
得分: -2
这似乎与Vite无关，我认为你明白：
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>
</>
)
);
看起来是这样的:
https://cristianolm.github.io/presentation/
实际路由将是 /presentation 而不是 /。
英文:
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 /
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论