React网站部署GitHub Pages后音视频加载失败及页面异常问题求助

问题1：首次加载仅显示页眉页脚，主内容区缺失 #

• 替换路由组件：把react-router-dom的BrowserRouter换成HashRouter，或者给BrowserRouter加basename属性，值设为你的仓库名/react-travel-website。GitHub Pages不支持静态页面的自定义路由重写，BrowserRouter会导致路由匹配失败，主内容组件无法渲染。
• 排查控制台错误：打开浏览器F12控制台，查看是否有组件加载失败、资源请求报错的信息，这些都会导致主内容不渲染。比如组件依赖的第三方库未正确打包，或者状态逻辑在生产环境下触发了错误分支。
• 检查条件渲染：确认主内容组件的渲染条件没有依赖本地开发环境的变量（比如process.env.NODE_ENV === 'development'这类判断），避免生产环境下组件被隐藏。

问题2：首页视频、图片加载失败 #

• 修正资源路径：React项目部署到GitHub Pages时，资源路径要加上仓库名前缀。可以用process.env.PUBLIC_URL自动适配，比如把<img src="./assets/img.jpg">改成<img src={process.env.PUBLIC_URL + "/assets/img.jpg"}>，视频路径同理。
• 设置homepage字段：在package.json里添加"homepage": "/react-travel-website/"，打包时React会自动给所有资源路径加上这个前缀，避免路径错误。
• 确认打包资源：运行npm run build后，检查build文件夹里的assets目录，确保视频、图片都在里面，再把整个build文件夹的内容推送到gh-pages分支，不要只推送源码。

问题3：刷新页面返回404 #

• 改用HashRouter：HashRouter的路由基于URL哈希（比如#/home），刷新时浏览器不会向GitHub服务器请求新页面，直接由React路由处理，不会出现404。
• 配置404 fallback：如果不想用HashRouter，就在项目的public目录下创建404.html，内容完全复制index.html。GitHub Pages遇到不存在的路径时会返回这个404页面，React路由就能接管并正确渲染对应组件。
• 用gh-pages包自动部署：安装gh-pages包（npm install gh-pages --save-dev），然后在package.json的scripts里添加"predeploy": "npm run build", "deploy": "gh-pages -d build"，运行npm run deploy就能自动打包并把构建文件推送到gh-pages分支，避免手动部署出错。

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