React项目部署GitHub Pages后用react-router页面空白问题求助

1. 修复路由适配问题 #

GitHub Pages是静态托管服务，不支持BrowserRouter的HTML5 History模式——本地开发时npm start启动的服务器会代理路由请求，但GitHub Pages没有这个能力，这就是你关了本地服务就无法访问的核心原因。

方案一：改用HashRouter #

修改你的App组件代码，把BrowserRouter替换为HashRouter：

import './css/style-form.css';
import { lazy, Suspense } from 'react';
// 替换BrowserRouter为HashRouter
import { HashRouter, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import { Audio } from  'react-loader-spinner';

const Main = lazy(() => import('./components/Main'));
const LogIn = lazy(() => import('./components/LogIn'));
const Contacts = lazy(() => import('./components/Contacts'));
const Error404 = lazy(() => import('./components/Error404'));

document.title = "Salary Balance"
function App() {
  return (
    <div className='home'>
      <HashRouter>
        <Header />
        <Suspense fallback={<div className="body__spinner" ><Audio height = "80" width = "80" radius = "9" color = 'black' ariaLabel = 'three-dots-loading' wrapperStyle wrapperClass /></div>}>
          <Routes>
            <Route element={<LogIn />} path='/'/>
            <Route element={<Main />} path='/main'/>
            <Route element={<Contacts />} path='/contacts'/>
            <Route element={<Error404 />} path='/*'/>
          </Routes>
        </Suspense>
      </HashRouter>
    </div>
  );
}

export default App;

方案二：保留BrowserRouter并添加basename #

如果不想用Hash模式，给BrowserRouter添加basename属性，值为你的GitHub仓库名称（比如仓库地址是https://your-name.github.io/salary-balance/，则basename="/salary-balance"）：

<BrowserRouter basename="/你的仓库名称">
  // 内部路由代码保持不变
</BrowserRouter>

2. 确认package.json配置 #

确保package.json里已正确设置homepage字段，示例：

{
  "homepage": "https://你的GitHub用户名.github.io/你的仓库名称/"
}

同时检查deploy脚本（若使用gh-pages包部署）：

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

3. 重新执行部署 #

运行命令重新构建并发布：

npm run deploy

4. 验证GitHub Pages设置 #

进入你的GitHub仓库，打开「Settings」→「Pages」，确认Source选择的是gh-pages分支的/root目录，且页面状态显示为已发布。

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