React应用出现双localStorage、pushState不生效问题该如何解决？

localStorage多实例问题 #

localStorage受浏览器同源策略严格约束，仅协议+域名+端口完全一致的站点才会共享存储实例。你配置的DNS重定向规则将子域名直接跳转到IP地址，域名和IP属于两个完全独立的源，自然会生成两个互不连通的localStorage，跨源读写必然失败。

window.history.pushState无效问题 #

React项目大多接入了react-router等前端路由库，路由库会主动接管浏览器历史栈的状态管理，应用内直接调用原生pushState修改地址后，路由库检测到自身维护的状态和实际地址不一致，会立刻覆盖地址变更，所以看起来调用没有效果。在控制台执行时路由库没有正在运行的状态更新逻辑，所以修改可以生效。本地环境没有域名跳转逻辑、源唯一，路由状态稳定，因此不会出现异常。

• 优先修复域名解析逻辑，删掉URL重定向跳IP的配置，改为将子域名通过A记录直接解析到对应IP，用户全程访问子域名、源保持唯一，localStorage多实例问题会直接消失。
• 如果必须保留跳转逻辑，将跳转目标从IP地址改为子域名，用301/302重定向保证用户最终停留在子域名站点，保证源统一。
• 不要直接调用原生window.history.pushState修改地址，改用你接入的路由库提供的API操作路由：比如react-router v6可通过useNavigate钩子，调用navigate('?name=val', { replace: false })修改查询参数，和路由库状态保持同步就不会被覆盖。
• 本地绑定域名启动失败的修复步骤：
  1. 修改本地hosts文件，新增映射规则：127.0.0.1 subdomain.domain.com
  2. 安装跨平台环境变量工具：npm i cross-env -D
  3. 修改package.json的启动命令："start": "cross-env PORT=80 HOST=subdomain.domain.com react-scripts start"
  4. 80端口属于系统特权端口，启动时如果报权限错误，需要用管理员/root身份运行终端，或者更换1024以上的端口测试。

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