选中新路由时如何打开独立React应用 多React应用跳转与部署实现

你提出的“主应用与独立game应用分离开发、跨端口跳转、生产环境同域名路径分流”的需求完全可以落地实现，仅需按开发、生产两个阶段分别做适配配置即可。
需要提前说明的是：受浏览器安全沙箱限制，网页端没有权限直接调用本地进程启动未运行的本地服务，所以不存在“完全不提前启动game应用、仅靠按钮点击临时唤起本地开发服务”的纯前端方案，实际落地时需要做对应的服务配置适配。

开发环境配置（对应本地3000主应用、4000game应用的场景） #

• 主应用按钮跳转逻辑调整
  把原本指向同应用内部路由 /game 的跳转逻辑，替换为game应用的开发服务完整地址，点击按钮时执行 window.open('http://localhost:4000/game', '_self')，用当前标签页打开的方式和原有路由跳转体验保持一致。
• game应用开发服务端口配置
  打开game应用根目录的 package.json，修改启动命令为 "start": "PORT=4000 react-scripts start"，指定game应用的开发服务固定运行在4000端口，和主应用的3000端口完全隔离。
• game应用静态资源路径适配
  在game应用的 package.json 中新增 "homepage": "/game" 配置，让开发环境下的静态资源引用自动带上 /game 前缀，避免出现静态资源加载404的问题。
• game应用路由基础路径适配
  如果game应用内部使用了React Router做路由管理，需要给路由实例传入 basename="/game" 参数，保证开发环境、生产环境下的路由匹配规则完全一致，不会出现跳转后路由失效的问题。

生产环境配置（对应同域名 my-react-app.com 路径分流的场景） #

两个独立构建的React应用不需要做复杂的微前端框架改造，仅需在站点前置的静态资源服务器（如Nginx）层面做路径级请求分流即可：

• 主应用的生产构建产物，部署在站点根目录下，所有非 /game 开头的请求，都返回主应用对应的静态资源与入口HTML
• game应用的生产构建产物，单独部署在站点下的 /game 对应的资源目录下，所有 /game 开头的请求，都返回game应用对应的静态资源与入口HTML
• game应用生产构建阶段保留 homepage="/game" 的配置，保证构建后的静态资源引用路径完全匹配生产环境的路径规则，不会出现资源加载失败

开发体验优化说明 #

如果想要减少开发时手动启动两个应用的操作成本，可以在主应用的启动脚本中接入 concurrently 工具，在启动主应用开发服务的同时，后台静默拉起game应用的开发服务，实现“启动一次命令、两个应用同时可访问”的效果。这种方式只是启动流程的自动化，并不是浏览器网页直接唤起本地进程的能力。

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