React应用手动输入URL时查询参数丢失，请求排查方向

数据老陈

2026-8-14

排查方向整理

针对手动输入带查询参数的URL丢失参数、但Link跳转正常的问题，可从以下几个方向排查：

检查页面组件内的重定向逻辑
查看对应路由（比如/或/home）的组件（如Dashboard）中是否存在初始化时的重定向代码，比如在useEffect里使用navigate时未携带搜索参数：

// 错误写法：丢失查询参数
useEffect(() => {
  navigate('/home');
}, []);

// 正确写法：保留查询参数
useEffect(() => {
  const { search } = window.location;
  navigate({ pathname: '/home', search });
}, []);

排查全局导航拦截/路由守卫
检查是否存在全局的路由拦截逻辑（比如自定义的权限校验组件、路由的loader/action函数），如果有重定向操作，确认是否传递了当前URL的搜索参数。例如React Router v6的loader中返回redirect时：
```
// 错误写法：丢失参数
return redirect('/home');

// 正确写法：保留参数
return redirect({ pathname: '/home', search: request.url.search });
```
检查URL格式正确性
注意手动输入的URL格式是否规范，比如你示例中的https://localhost:3000/home?query_params_1=1&?query_params_2=2包含两个?，这是无效格式，正确的多参数写法应为?query_params_1=1&query_params_2=2，浏览器可能会自动修正错误格式导致参数丢失。
确认路由匹配与重定向配置
你的路由配置中没有/home路径，检查是否存在将/home重定向到/的配置（比如<Route path="/home" element={<Navigate to="/" />} />），如果有，需修改为携带搜索参数的重定向：
```
<Route path="/home" element={<Navigate to={({ search }) => ({ pathname: '/', search })} />} />
```
排查全局location监听逻辑
检查是否有全局组件监听window.location或useLocation的变化，在初始化时执行了未携带参数的重定向操作，这类逻辑通常会导致手动输入URL时参数丢失，但通过Link跳转时因为是客户端路由，可能不会触发该逻辑。