React Router中useSearchParams与useBlocker的潜在问题分析

问题背景

在React Router 6.x版本中，开发者在使用useSearchParams和useBlocker组合时可能会遇到一个微妙但重要的问题。当用户尝试通过useSearchParams更新URL查询参数，同时使用useBlocker来阻止导航变更时，即使取消了导航变更，useSearchParams返回的状态值也会被更新，而URL本身却保持不变。

问题现象

具体表现为：

1. 用户通过按钮点击触发查询参数更新
2. useBlocker拦截此次变更并显示确认对话框
3. 用户选择取消导航变更
4. 虽然URL保持不变，但useSearchParams返回的状态值已经更新为新值

技术分析

这个问题本质上是一个状态同步问题。useSearchParams内部维护了自己的状态，而useBlocker则负责拦截路由变更。当两者结合使用时，存在以下执行流程：

1. setSearchParams被调用，更新内部状态
2. 路由变更被useBlocker拦截
3. 用户取消变更，URL回滚
4. 但useSearchParams的内部状态已经改变且未回滚

解决方案

对于这个问题，目前有几种可行的解决方案：

方案一：使用useLocation替代

const location = useLocation();
const searchParams = new URLSearchParams(location.search);

这种方法直接读取当前URL的查询参数，避免了状态不一致的问题。

方案二：自定义hook封装

可以创建一个自定义hook来封装这个逻辑，确保在导航被阻止时状态也能正确回滚：

function useStableSearchParams() {
  const [searchParams, setSearchParams] = useSearchParams();
  const location = useLocation();
  
  // 当URL变更时同步状态
  useEffect(() => {
    const currentParams = new URLSearchParams(location.search);
    if (searchParams.toString() !== currentParams.toString()) {
      setSearchParams(currentParams);
    }
  }, [location.search]);
  
  return [searchParams, setSearchParams];
}

方案三：监听blocker状态

const [searchParams, setSearchParams] = useSearchParams();
const blocker = useBlocker(/*...*/);

useEffect(() => {
  if (blocker.state === 'blocked' && !blocker.proceeding) {
    // 重置为当前URL的查询参数
    const currentParams = new URLSearchParams(window.location.search);
    setSearchParams(currentParams);
  }
}, [blocker.state]);

最佳实践建议

1. 当需要精确控制查询参数状态时，优先考虑使用useLocation而非useSearchParams
2. 如果必须使用useSearchParams，建议配合useEffect监听URL变化并同步状态
3. 在复杂的导航拦截场景中，考虑将查询参数状态提升到组件状态或全局状态管理

总结

React Router的这个行为虽然不是bug，但在特定场景下确实可能造成困惑。理解其内部机制有助于开发者做出更合理的设计决策。在需要严格同步URL和状态的场景中，采用上述解决方案可以避免潜在的问题。