不使用React-Router时如何在React应用启动时添加URL查询参数

之前配置失效原因 #

你尝试的BROWSER_ARGS是用于向浏览器本体传递启动参数（例如无痕模式、禁用跨域校验等）的配置，并不负责修改最终打开的页面URL，因此无法实现追加查询参数的需求。 #

方案1：通过NPM scripts实现（符合你的需求） #

Windows环境适配（你当前使用的cmd语法） #

修改package.json中的start命令如下，禁用react-scripts默认打开的无参数页面，手动启动带参数的页面即可：

"start": "set PORT=41100 && set BROWSER=none && env-cmd -f .env.dev react-scripts start && start http://localhost:41100?abc=xyz"

说明：set BROWSER=none会阻止react-scripts默认打开不带参数的浏览器页，最后通过系统start命令打开带自定义查询参数的地址。

跨平台兼容方案（适配Windows/Mac/Linux） #

如果需要兼顾不同开发系统的兼容性，先安装两个开发依赖：

npm install --save-dev cross-env open-cli

修改start命令为：

"start": "cross-env PORT=41100 BROWSER=none env-cmd -f .env.dev react-scripts start & open-cli http://localhost:41100?abc=xyz"

说明：cross-env统一了不同系统的环境变量设置语法，open-cli提供了跨平台的URL/文件打开能力。 #

方案2：优化你当前的index.jsx实现 #

你现在直接修改window.location.search的写法会触发一次页面重加载，体验可以优化，改用history.replaceState可以无刷新追加参数：

if (process.env.NODE_ENV === "development" && !window.location.search) {
  window.history.replaceState({}, '', `${window.location.pathname}?abc=xyz`);
}

这个方案不需要修改启动命令，侵入性更低，也不会和微前端场景下主应用传递的参数冲突，是更推荐的实现方式。

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