React应用下拉框onChange跳转丢失Origin问题及方案咨询

当前问题：使用相对路径/newQS?string=abc修改window.location.href时，开发环境中丢失路径前缀/ABC，URL从https://dev.mypage.com/ABC/newQS?string=abc变为https://dev.mypage.com/newQS?string=abc，引发认证错误。

你提出的方案是否可行？ #

不可行。window.location.origin仅包含协议、域名和端口（如https://dev.mypage.com），不包含路径中的/ABC前缀，拼接后生成的URL依然缺少该前缀，无法解决问题。

最优解决方案 #

推荐两种可靠的处理方式：

1. 用URL对象精准构造URL（无路由库依赖）

通过URL解析当前地址，保留路径前缀的同时更新目标路径和查询参数：

const currentUrl = new URL(window.location.href);
// 保留现有路径前缀，替换为目标路径
currentUrl.pathname = `${currentUrl.pathname.split('/newQS')[0]}/newQS`;
currentUrl.searchParams.set('string', 'abc');
window.location.href = currentUrl.toString();

该方法会自动保留/ABC前缀，生成正确的https://dev.mypage.com/ABC/newQS?string=abc。

2. 使用React Router导航API（推荐，符合React开发规范）

如果项目基于React Router，直接使用路由提供的navigate方法，它会自动适配应用配置的basename（即/ABC前缀）：

import { useNavigate } from 'react-router-dom';

// 在组件内调用
const navigate = useNavigate();
navigate('/newQS', { search: '?string=abc' });

这种方式无需手动处理路径前缀，React Router会根据路由配置自动拼接正确URL，避免路径错误。

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