React应用部署到GitHub后打开显示README页面，该如何解决？

• 你推送至main分支的仅为React项目源代码，未包含可直接运行的生产环境构建产物。GitHub Pages默认优先读取部署分支根目录的index.html作为站点入口，未找到时会自动渲染根目录的README.md文件，也就是你现在看到的页面效果。
• homepage配置仅用来指定React应用的静态资源加载路径，本身不会自动生成构建产物，需要配合后续的构建、部署操作才能生效。

按以下步骤操作即可正常部署：

1. 本地安装gh-pages部署工具

npm install --save gh-pages

2. 编辑package.json文件，在scripts字段中新增两条命令：

{
  "scripts": {
    // 原本的start、build、test等命令保留，新增下面两行
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

3. 执行部署命令，工具会自动执行构建、并将build目录下的所有静态资源推送至仓库的gh-pages分支

npm run deploy

4. 进入GitHub对应仓库的Settings页面，找到Pages配置栏，将部署分支设置为gh-pages，目录选择根目录/ (root)，保存配置后等待1-3分钟，再访问你的GitHub Pages地址即可正常打开React应用。

后续代码更新后，只需要重新执行npm run deploy即可同步线上内容。

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