React/Vite 应用成功发布到 GitHub Pages，但页面是空白

Question

我尝试在 GitHub Pages 上发布我的项目 React.js/Vite，但是发布后是一个空白页面。

尝试了其他帖子中提到的所有内容，但我仍然得到一个空白页面。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/redberry-bootcamp'
})

package.json

{
  "name": "redberry-bootcamp",
  "homepage": "http://n1kushach.github.io/redberry-bootcamp",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "@hookform/resolvers": "^2.9.10",
    "axios": "^1.3.2",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.0",
    "react-router-dom": "^6.8.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

应用程序.jsx

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./pages/Home";
import { Info } from "./pages/Info";
import { Education } from "./pages/Education";
import { Experience } from "./pages/Experience";
import { useState, useEffect } from "react";

function App() {
  const [mainData, setMainData] = useState();
  const [img, setImg] = useState();
  const apiData = new FormData()
  
    useEffect(() => {
      sessionStorage.setItem("mainData", JSON.stringify(mainData));
    }, [mainData])

  return (
    <div className="App">
      <Router basename="/redberry-bootcamp/">
        <Routes>
          <Route path="/" element={<Home mainData={mainData} setMainData={setMainData} />} />
          <Route path="/info" element={<Info img={img} setImg={setImg} apiData={apiData} mainData={mainData} setMainData={setMainData} />} />
          <Route path="/experience" element={<Experience img={img} setImg={setImg}  apiData={apiData}  mainData={mainData} setMainData={setMainData}/>}/>
          <Route path="/education" element={<Education img={img} setImg={setImg}  apiData={apiData}  mainData={mainData} setMainData={setMainData}/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Answer 1

将 vite.config 中的基础更改为“./”，并从 package.json 中的主页中删除“redberry-bootcamp”。由于您使用的是react-router-dom并且设置了基本名称，因此您不需要在package.json中使用它

Answer 2

你解决问题了吗，我确实改变了基本tp'./'但什么也没有