React Router路径参数转API请求的URL编码问题求助

问题根源 #

1. 路径参数中的%26会被react-router自动解码为&，但+作为路径中的字面量会被保留，因此useParams拿到的name是you+&+me，而非数据库存储的编码格式you+%26+me。
2. 直接拼接query参数时，&会被当作参数分隔符，导致请求被截断；使用encodeURIComponent编码会把+转成%2B，后端解码后得到you+&+me，与数据库的you+%26+me不匹配。

方案1：手动还原路径参数的编码格式 #

针对useParams拿到的name，只将其中的&重新编码为%26，保留+不变，确保传递给后端的参数与数据库存储格式一致：

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

const MyElement = () => {
  const { name, code } = useParams();
  // 将&重新编码为%26，匹配数据库存储格式
  const encodedName = name.replace(/&/g, '%26');
  myService.getPage(encodedName, code);
};

对应的myService无需额外修改，拼接后的请求URL为http://localhost:8080/api/page?name=you+%26+me&code=123，与数据库存储的you+%26+me完全匹配。

方案2：获取原始未解码的路径参数 #

通过useLocation钩子直接读取路径的原始字符串，手动解析出未解码的name参数，避免react-router自动解码的影响：

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

const MyElement = () => {
  const location = useLocation();
  // 按路径分割解析参数，需确保路由结构为/test/:name/:code
  const [, , name, code] = location.pathname.split('/');
  // name此时为原始编码值you+%26+me，直接传递
  myService.getPage(name, code);
};

此方法能直接拿到地址栏中显示的原始编码参数，无需额外处理即可匹配数据库格式。

方案3：统一前后端编码逻辑（推荐） #

修改后端存储逻辑，存储原始字符串（如you & me）而非编码后的字符串，前端使用URLSearchParams自动处理query参数编码，确保前后端编码规则一致：

1. 前端修改myService：

getPage(name: string, code: string): Promise<any> {
  const params = new URLSearchParams();
  params.append('name', name);
  params.append('code', code);
  // 使用axios的params自动拼接，避免手动编码错误
  return axios.get('http://localhost:8080/api/page', { params });
}

2. 后端调整：接收参数时自动解码（Spring的@RequestParam默认会处理form编码），直接用解码后的原始字符串匹配数据库中的原始数据。

此方案从根源上避免编码格式不一致的问题，更符合RESTful API设计规范，也便于后续维护。

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