React应用部署至GitHub Pages后显示空白屏问题求助

针对本地运行正常、部署到GitHub Pages后显示空白屏且控制台无报错的问题，核心原因是React Router的路由模式与GitHub Pages静态部署环境不兼容，以下是具体解决步骤：

解决方案1：改用HashRouter #

GitHub Pages是静态托管服务，BrowserRouter依赖服务器端路由配置，静态环境无法处理这类路由请求，改用HashRouter可以规避该问题：

修改你的路由配置文件（通常是App.js或index.js）：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Home from './Home'; // 替换为你的Home组件实际路径

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

解决方案2：为BrowserRouter配置basename #

若想继续使用BrowserRouter，需设置basename为你的仓库名称（即URL中github.io后的路径部分）：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Home from './Home';

function App() {
  return (
    <Router basename="/project_social_app">
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

重新部署 #

修改完成后，执行命令重新构建并部署：

npm run deploy

部署完成后访问页面，登录界面即可正常显示。

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