React多站点部署GitHub Pages后显示空白页问题求助

问题背景 #

使用React 18.2.0 + react-router-dom 6.13.0开发多站点应用，采用Browser Router，部署到GitHub Pages后页面空白。已尝试添加basename、切换为HashRouter均无效，同时VSCode中package.json的homepage行存在schema加载错误：

Problems loading reference 'vscode://schemas/settings/configurationDefaults': Unable to load schema from 'vscode://schemas/settings/configurationDefaults': cannot open vscode://schemas/settings/configurationDefaults. Detail: Unable to resolve text model content for resource vscode://schemas/settings/configurationDefaults.

当前配置 #

Browser Router路由配置 #

<Router>
  <Route path="/DAPP-identity-management" element={<Main />} />
  <Route path="/DAPP-identity-management/authorize" element={<Authorize />} />
  <Route path="/DAPP-identity-management/info" element={<Info />} />
</Router>

package.json配置 #

"homepage": "https://Xardesso.github.io/DAPP-identity-management/",
"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"
},

解决步骤 #

1. 修正BrowserRouter的basename与路由路径
   react-router-dom v6中需明确使用BrowserRouter组件，并正确设置basename为仓库名称。同时路由路径无需重复添加仓库前缀，basename会自动拼接，且v6版本路由必须包裹在Routes组件内：

   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
   
   <Router basename="/DAPP-identity-management">
     <Routes>
       <Route path="/" element={<Main />} />
       <Route path="/authorize" element={<Authorize />} />
       <Route path="/info" element={<Info />} />
     </Routes>
   </Router>
   

2. 添加404.html解决刷新404问题
   GitHub Pages不支持HTML5 History模式的路由刷新，需在public目录下创建404.html，复制index.html的全部内容。这样当用户刷新子路由时，GitHub Pages会返回404.html，React Router就能正确解析路由。

3. 重新构建并部署
   执行以下命令重新构建并上传到GitHub Pages：

   npm run build
   npm run deploy
   

4. 忽略VSCode schema加载错误
   该错误是VSCode本地配置问题，与项目部署无关，可直接忽略。若要消除提示，可更新VSCode到最新版本，或在VSCode设置中关闭相关JSON schema验证。

内容的提问来源于stack exchange，提问作者Marcin Łętowski