Wouter v3.4.0 发布：新增 useSearchParams Hook 简化 URL 参数管理

Wouter 是一个轻量级的 React 路由库，以其简洁的 API 设计和极小的包体积著称。它提供了类似 React Router 的核心功能，但去除了复杂的概念和冗余的代码，特别适合中小型项目或需要极致性能的场景。

在最新的 v3.4.0 版本中，Wouter 引入了一个非常实用的新 Hook —— useSearchParams，它极大地简化了 URL 查询参数的管理工作。这个功能的灵感来自于 React Router 的类似实现，但保持了 Wouter 一贯的简洁风格。

useSearchParams Hook 的核心功能

useSearchParams Hook 提供了一个优雅的方式来读取和更新当前 URL 的查询参数。它返回一个包含两个元素的数组：

1. searchParams：一个 URLSearchParams 对象，提供了查询参数的读取接口
2. setSearchParams：一个更新函数，用于修改当前的查询参数

这种设计模式与 React 的 useState Hook 非常相似，使得开发者能够以声明式的方式管理 URL 状态。

基本用法示例

import { useSearchParams } from "wouter";

function FilterComponent() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  // 读取参数
  const activeFilter = searchParams.get('active');
  
  // 更新参数
  const toggleFilter = () => {
    setSearchParams(prev => {
      prev.set('active', activeFilter === 'true' ? 'false' : 'true');
      return prev;
    });
  };
  
  return (
    <button onClick={toggleFilter}>
      {activeFilter === 'true' ? '禁用' : '启用'}筛选
    </button>
  );
}

技术细节解析

1. URLSearchParams 集成
   useSearchParams 直接使用了浏览器原生的 URLSearchParams API，这意味着它与现代浏览器完全兼容，并且性能优异。开发者可以调用所有 URLSearchParams 的方法，如 get(), getAll(), has(), append() 等。

2. 响应式更新
   当调用 setSearchParams 更新参数时，Wouter 会自动触发路由更新，所有使用 useSearchParams 或 useLocation 的组件都会重新渲染以获取最新的参数值。

3. 函数式更新
   与 React 的 useState 类似，setSearchParams 也支持函数式更新，接收前一个状态作为参数，确保在并发更新时的数据一致性。

实际应用场景

1. 筛选和排序
   在电商网站中，常用于保存用户选择的筛选条件（价格范围、品牌等）和排序方式。

2. 分页控制
   管理当前页码和每页显示数量，方便用户分享特定页面的链接。

3. 模态框状态
   通过 URL 参数控制模态框的显示/隐藏状态，实现可分享的页面状态。

4. 轻量级状态管理
   对于简单的应用状态，可以直接使用 URL 参数替代部分状态管理库的功能。

与传统方式的对比

在 useSearchParams 出现之前，开发者需要手动处理 URL 参数：

import { useLocation } from "wouter";

function OldWay() {
  const [location, setLocation] = useLocation();
  const searchParams = new URLSearchParams(location.search);
  
  // 更新参数需要手动构造URL
  const updateParams = () => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('key', 'value');
    setLocation(`${location.pathname}?${newParams.toString()}`);
  };
}

新的 Hook 将这些繁琐的操作封装起来，提供了更加简洁直观的 API。

性能考量

Wouter 的实现确保了 useSearchParams 的高效性：

1. 只在参数实际变化时触发更新
2. 使用浏览器原生 API，避免不必要的解析开销
3. 轻量级的内部实现，不会增加显著的包体积

总结

Wouter v3.4.0 引入的 useSearchParams Hook 是该库功能演进的重要一步，它填补了 Wouter 在 URL 参数管理方面的空白，使得开发者能够以更少的代码实现更强大的功能。这一改进进一步巩固了 Wouter 作为轻量级路由解决方案的地位，特别适合那些重视开发体验和性能的项目。

对于已经在使用 Wouter 的开发者，可以无缝升级到新版本并立即开始使用这个新功能。对于正在评估路由方案的团队，这一更新使得 Wouter 成为一个更加全面的选择，特别是当项目需要简洁高效的 URL 参数管理时。