React应用GitHub Pages部署问题：访问链接跳转至README文件

1. 确认GitHub Pages部署源配置 #

• 进入仓库设置，找到「Pages」选项卡
• 在「Build and deployment」区域，检查「Source」设置：
  • 若使用GitHub Actions部署，确保已配置正确的React部署工作流（可选用GitHub提供的「Deploy React to GitHub Pages」模板）
  • 若使用分支部署，选择gh-pages分支，并将目录设置为/root

2. 配置React项目的homepage字段 #

• 打开项目根目录的package.json，添加或修改homepage字段：

  "homepage": "https://thippesh57.github.io/Tic-Tac-Toe/"
  

• 这个配置让React识别应用的部署路径，避免资源加载错误。

3. 正确构建并部署应用 #

• 执行npm run build生成生产环境构建文件，产物会存放在build目录
• 若手动部署，安装gh-pages依赖：npm install --save-dev gh-pages
• 在package.json的scripts中新增：

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  

• 运行npm run deploy，该命令会自动将build目录的内容推送到gh-pages分支

4. 检查gh-pages分支的文件结构 #

• 确认gh-pages分支的根目录下存在index.html文件（React应用的入口）
• 若根目录同时有README.md和index.html，GitHub Pages会优先加载index.html，如果仍跳转至README，说明index.html未被正确部署到根目录

5. 等待部署缓存更新 #

• 部署完成后，GitHub Pages可能需要几分钟完成缓存同步，不要立即刷新页面验证

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