页面加载时读取当前URL参数并同步到组件状态的实现问题

你不需要手写多次.split()拆键值对，原生URLSearchParams本身就支持直接解析k=v&k2=v2格式的字符串，完全不依赖URL里的?标识，之前用不了是因为你直接传了window.location.search（这个值在你的URL里是空的，因为不存在?引导的查询段）。

最简实现步骤 #

1. 从路径中截取参数字符串，不要硬编码split后的固定下标，取路径最后一段的写法适配后续路径层级变更，鲁棒性更好：

   // 过滤掉split产生的空字符串，取最后一个路径段就是参数字符串
   const queryStr = window.location.pathname.split('/').filter(Boolean).pop();
   

2. 直接把参数字符串传入URLSearchParams构造函数，就能拿到所有解析好的键值对：

   const searchParams = new URLSearchParams(queryStr);
   

这个原生API会自动处理参数解码（比如你示例里的+会自动转成空格）、特殊字符转义，不需要自己写额外逻辑，比手动split的方案少踩很多边界坑（比如参数值里带=、编码后的&这类场景）。

对接组件初始状态 #

直接遍历默认状态的键，从解析好的参数对象里取值做合并即可，注意URL解析出来的参数默认都是字符串类型，数字、布尔类的参数需要手动做类型转换：

// 组件默认状态
const defaultState = {
  patientName: '',
  pageSize: 20,
  currentPage: 1
};

const initialState = {};
for (const [key, defaultVal] of Object.entries(defaultState)) {
  const urlVal = searchParams.get(key);
  if (urlVal === null) {
    initialState[key] = defaultVal;
    continue;
  }
  // 按默认值的类型做转换
  if (typeof defaultVal === 'number') {
    initialState[key] = Number(urlVal);
    continue;
  }
  initialState[key] = urlVal;
}

提示：你当前使用的无?、把参数直接放在路径段的URL格式不符合通用URL规范，如果后续有路由迭代空间，建议调整为标准的查询串格式http://localhost:8080/monitor?patientName=Courtney+Patient&pageSize=50，后续可以直接用new URLSearchParams(window.location.search)解析，不需要额外做路径截取。

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