部署到GitHub Pages的React项目<div id='root'>内容空白求助

问题根源 #

你的应用部署在GitHub Pages的子路径/portfolio/下，但BrowserRouter默认以根域名的根路径/作为路由基准，导致路由规则无法匹配，最终<div id="root"></div>内无内容。

修复步骤 #

1. 同步package.json的homepage配置
   确保homepage与实际部署路径完全一致：

   {
     "homepage": "https://ltbd78.github.io/portfolio"
   }
   

2. 为BrowserRouter设置basename属性
   在index.jsx中，给BrowserRouter添加基准路径参数，匹配GitHub Pages的子路径：

   // index.jsx
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(
     <React.StrictMode>
       <BrowserRouter basename="/portfolio">
         <App />
       </BrowserRouter>
     </React.StrictMode>
   );
   

3. 本地验证后重新部署
   先本地构建并预览，确认页面正常渲染：

   npm run build
   npm run serve
   

   访问http://localhost:3000/portfolio检查效果，没问题后执行部署：

   npm run deploy
   

为什么迁移到App.jsx才失败？ #

迁移package.json和index.jsx时，App组件未使用嵌套路由，简单组件渲染不受子路径影响；但加入Routes和嵌套路由后，路由匹配依赖正确的基准路径，因此出现渲染失败的情况。

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