使用React Router v6.6.1和Vite部署Github Pages遇404错误

我首次尝试将基于Vite、React-Router-Dom v6.6.1开发的React应用部署到Github Pages时遇到以下问题：首次加载页面时，浏览器找不到index.html文件，显示我自定义的404错误页面；但点击返回主页后，浏览器能正常解析index.html及对应JavaScript，应用运行和开发环境完全一致。我已确认vite.config.js中base: "/presentation/"路径正确，还尝试过移除该配置、在package.json中添加homepage字段等操作，均未解决问题。

核心文件内容 #

VITE相关文件 #

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>

已尝试的解决步骤 #

• 保留vite.config.js中base字段构建生产包
• 移除base字段重新构建
• 恢复base字段并在package.json中添加homepage字段

内容的提问来源于stack exchange，提问作者Cristianolm