React应用部署到Github Pages后显示空白页面，已尝试常见解决方案仍未解决

我现在碰到个棘手的问题：把用React-Router-DOM实现客户端路由的React应用部署到Github Pages后，页面居然是空白的——除了路由上下文之外的组件，其他所有组件内容都没加载到DOM里。

为了排查问题，我已经翻遍了Stack Overflow上相关的讨论帖，还跟着一篇讲React Router适配Github Pages的帖子做了修改，但问题还是没解决。

我按照其他Stack Overflow讨论和create-react-app官方部署文档的建议，做了以下改动：

• 将createBrowserRouter替换为createHashRouter
• 给createHashRouter设置了仓库名称作为basename
• 确认package.json里的homepage配置完全符合文档要求
• 把package.json中的private属性设置为false

做完这些改动后部署了build版本，build文件夹里的index.html内容如下：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/FrontEndQuizApp/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/FrontEndQuizApp/logo192.png" />
    <link rel="manifest" href="/FrontEndQuizApp/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/FrontEndQuizApp/static/js/main.ea628bb2.js"></script>
    <link href="/FrontEndQuizApp/static/css/main.2f2eb39d.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

我确认网站和浏览器的JavaScript都是启用状态，但问题依旧。

下面是我的应用代码片段：

Index.tsx（路由实现部分） #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import QuestionComp from "./components/QuestionComp";
import {
  createHashRouter,
  FutureConfig,
  RouterProvider,
} from "react-router-dom";

import { store } from "./store";
import { Provider } from "react-redux";
import { ToggleProvider } from "./components/ThemeToggleContext";
import ThemeToggle from "./components/ThemeToggel";
import GlobalBackground from "./components/GlobalBackground";

const router = createHashRouter(
  [
    {
      path: "/*",
      element: <App />,
    },
    {
      path: "/Question",
      element: <QuestionComp />,
    },
  ],
  { basename: "/FrontEndQuizApp" }
);

// declare function RouterProvider(props: RouterProviderProps): React.ReactElement;

interface RouterProviderProps {
  fallbackElement?: React.ReactNode;
  router: any;
  future?: FutureConfig;
}

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <ToggleProvider>
      <GlobalBackground>
        <ThemeToggle></ThemeToggle>
        <Provider store={store}>
          <RouterProvider router={router} />
        </Provider>
      </GlobalBackground>
    </ToggleProvider>
  </React.StrictMode>
);

reportWebVitals();

Package.json（项目配置部分） #

{
  "name": "quizreactapp",
  "version": "0.1.0",
  "private": false,
  "homepage": "https://ayushi186.github.io/FrontEndQuizApp",
  "dependencies": {
    "@redux-devtools/extension": "^3.3.0",
    "@reduxjs/toolkit": "^2.2.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.101",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "i": "^0.3.7",
    "npm": "^10.8.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-js-switch": "^1.1.6",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.24.1",
    "react-scripts": "5.0.1",
    "react-switch": "^7.1.0",
    "redux-devtools-extension": "^2.13.9",
    "sass": "^1.80.3",
    "styled-components": "^6.1.11",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^6.2.0"
  }
}

部署到gh-pages后的应用输出：

备注：内容来源于stack exchange，提问作者Cockatoolover