ReactJS应用部署GitHub Pages后无法显示且无控制台错误求助

问题详情 #

使用ReactJS开发的简单应用，通过GitHub Pages部署后无法显示内容，浏览器控制台无任何错误提示。应用地址：https://meriemu.github.io/reactjsBlog/

项目package.json内容 #

{  
  "homepage": "https://Meriemu.github.io/reactjsBlog",  
  "name": "react-blog-smooth-scroll",  
  "version": "0.1.0",  
  "private": true,  
  "dependencies": {  
    "@testing-library/jest-dom": "^5.16.5",  
    "@testing-library/react": "^13.4.0",  
    "@testing-library/user-event": "^13.5.0",  
    "animejs": "^3.2.1",  
    "firebase": "^9.13.0",  
    "react": "^18.2.0",  
    "react-dom": "^18.2.0",  
    "react-icons": "^4.6.0",  
    "react-router-dom": "^6.4.2",  
    "react-scripts": "5.0.1",  
    "react-scroll": "^1.8.8",  
    "styled-components": "^5.3.6",  
    "web-vitals": "^2.1.4"  
  },  
  "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"  
  },
  .........
}

排查与解决建议 #

• 路由配置调整：因为使用了react-router-dom，GitHub Pages静态部署环境下，BrowserRouter会导致路由匹配失败。两种解决方式：
  1. 替换为HashRouter，无需额外配置；
  2. 保留BrowserRouter，添加basename属性：<BrowserRouter basename="/reactjsBlog">，值与homepage中的路径一致。
• 检查gh-pages依赖：当前package.json未显示gh-pages依赖，需执行npm install gh-pages --save-dev安装后，重新运行npm run deploy。
• 静态资源路径验证：查看build后的index.html，确认所有静态资源（JS、CSS、图片等）的引用路径是否正确。react-scripts会根据homepage自动处理，但自定义静态资源需确保用相对路径或匹配homepage的绝对路径。
• GitHub Pages设置检查：进入仓库的Pages设置页面，确认部署分支为gh-pages，部署目录选择根目录（root）。
• 组件渲染排查：检查根组件或App组件是否存在条件渲染逻辑（如异步数据加载未返回时无兜底内容），可在根组件中添加默认渲染内容，比如：

  function App() {
    // 原逻辑
    return (
      <div className="app">
        {/* 原内容 */}
        {/* 添加兜底 */}
        {!content && <div>加载中...</div>}
      </div>
    )
  }
  

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