useLocation Hook重载页面时URL Search出现编码字符串问题排查

这是正常行为，并非useLocation Hook的问题，根源在于URL的规范以及浏览器、路由的不同处理逻辑：

原因解析 #

• URL规范强制特殊字符编码
  URL标准（RFC 3986）规定，空格、中文等特殊字符不能直接出现在URL中，必须进行百分号编码（比如空格转为%20）。首次通过history.push跳转时，React Router会临时处理编码逻辑，同时让浏览器地址栏显示解码后的友好格式，这就是你首次加载看到未编码字符串的原因。

• 页面重载触发浏览器原生处理
  当你刷新页面时，浏览器会直接读取地址栏的URL并严格按照规范编码后，再传递给前端路由。此时useLocation拿到的是浏览器编码后的原始URL内容，所以search字段会显示%20这类编码值。

功能影响与优化建议 #

不用担心功能受影响——你代码中使用的URLSearchParams会自动识别编码后的字符串，调用get('q')依然能正确获取到解码后的test 123。

如果想从根源上统一URL格式，避免手动拼接query时出现不规范的情况，推荐用以下方式构建路由参数：

// 用URLSearchParams构建规范的query字符串
const handleSearch = () => {
  const params = new URLSearchParams();
  params.set('q', 'test 123');
  history.push(`/search?${params.toString()}`); 
};

如果是React Router v6+版本，更推荐使用useNavigate配合createSearchParams：

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

function Home() {
  const navigate = useNavigate();

  const handleSearch = () => {
    navigate({
      pathname: '/search',
      search: createSearchParams({ q: 'test 123' }).toString()
    });
  };

  // ...
}

内容的提问来源于stack exchange，提问作者Gia Huy Nguyễn