React多页面应用部署至GitHub Pages/Heroku遇路由404或无内容问题

• 替换BrowserRouter为HashRouter：GitHub Pages的静态服务器无法处理history模式下的任意路径请求，改用HashRouter后，路由路径以哈希（#）开头，不会触发服务器路由，能避免404。
• 确认basename配置准确性：可以直接将Router的basename硬编码为"/portfolio-react-router"，替代process.env.PUBLIC_URL，避免环境变量读取异常导致路径错误。
• 检查部署分支与产物：确保GitHub Pages部署的是gh-pages分支，且该分支包含npm run build生成的完整build文件夹内容，避免部署了未构建的源码。
• 测试哈希路径访问：直接尝试访问带哈希的页面链接（如https://cpm-128.github.io/portfolio-react-router/#/your-page），验证路由是否正常渲染。

• 查看实时运行日志：执行命令heroku logs --tail，查看应用启动、build及运行过程中的日志，隐性错误通常会在这里暴露。
• 确认build命令有效性：检查package.json的scripts字段是否包含"build": "react-scripts build"，Heroku依赖该命令生成可部署的静态文件。
• 验证端口配置：确保应用监听Heroku提供的process.env.PORT环境变量指定的端口，而非固定端口（如3000），自定义服务器需调整端口设置。
• 确认buildpack状态：执行heroku buildpacks查看当前使用的buildpack，确保是mars/create-react-app，若不是重新执行heroku buildpacks:set mars/create-react-app。
• 本地模拟部署环境：执行npm run build生成产物后，用serve -s build启动静态服务器，模拟Heroku运行环境，排查是否是build产物本身的问题。

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