Wouter v3.6.0 发布：内存路由现在支持搜索参数

Wouter 是一个轻量级的 React 路由库，它以其简洁的 API 和灵活的架构在开发者社区中广受欢迎。与 React Router 等传统路由解决方案相比，Wouter 提供了更小的包体积和更直观的使用方式，特别适合需要轻量级路由的场景。

在最新发布的 v3.6.0 版本中，Wouter 为内存路由（memory-location）添加了对搜索参数（search params）的支持，这一改进由社区贡献者 mitulagr2 实现。这个功能扩展使得 Wouter 的内存路由功能更加完善，能够更好地模拟浏览器 URL 的行为。

内存路由与搜索参数

内存路由是 Wouter 提供的一个特殊路由模式，它不会改变浏览器的实际 URL，而是将路由状态保存在内存中。这在测试环境、嵌入式应用或需要控制路由但不希望影响浏览器历史的场景中非常有用。

在 v3.6.0 之前，内存路由虽然可以处理路径部分，但对查询参数（search params）的支持有限。新版本通过引入 searchHook 参数，使得内存路由能够完整地模拟 URL 的路径和查询参数两部分。

如何使用新功能

要使用这个新功能，开发者需要从 wouter/memory-location 导入 memoryLocation 函数，并同时使用 hook 和 searchHook：

import { Router, useSearch } from "wouter";
import { memoryLocation } from "wouter/memory-location";

const { hook, searchHook } = memoryLocation({ 
  path: "/products?category=electronics",
  searchPath: "sort=price" 
});

function App() {
  return (
    <Router hook={hook} searchHook={searchHook}>
      <YourComponent />
    </Router>
  );
}

在这个例子中，我们初始化了一个内存路由，路径设置为 "/products?category=electronics"，并额外添加了 "sort=price" 搜索参数。这样，组件中获取到的搜索字符串将是 "category=electronics&sort=price"。

在组件中使用

在组件内部，你可以像往常一样使用 useLocation 和 useSearch 钩子来获取当前的路由状态：

function YourComponent() {
  const [location, navigate] = useLocation();
  const search = useSearch();
  
  return (
    <div>
      <div>当前路径: {location}</div>
      <div>当前搜索参数: {search}</div>
      <button onClick={() => navigate("/products/123?category=phones")}>
        导航
      </button>
    </div>
  );
}

当用户点击导航按钮时，内存路由会更新其内部状态，触发组件重新渲染，显示新的路径和搜索参数。

技术实现细节

这个功能的实现巧妙地分离了路径和搜索参数的处理逻辑。memoryLocation 函数现在返回两个钩子：

1. hook：处理路径部分的导航和状态管理
2. searchHook：专门处理搜索参数的状态

这种分离的设计保持了 Wouter 一贯的模块化理念，使得各个功能点可以独立工作，同时也为未来的扩展留下了空间。

适用场景

这个增强功能特别适用于以下场景：

1. 单元测试：在测试路由相关的组件时，可以精确控制路径和查询参数
2. 嵌入式应用：在 iframe 或微前端架构中，需要控制内部路由但不影响父级URL
3. 状态管理：当需要将应用状态编码在URL参数中，但不希望产生实际导航记录时
4. 无浏览器环境：在服务器端渲染或React Native等非浏览器环境中模拟路由行为

总结

Wouter v3.6.0 对内存路由的搜索参数支持是该库功能完善的重要一步。这一改进使得内存路由能够更真实地模拟浏览器路由行为，为开发者提供了更强大的工具来处理复杂的路由场景。通过保持简洁的API设计，Wouter 再次证明了轻量级路由库也可以提供丰富的功能。

对于已经使用 Wouter 内存路由的开发者来说，这个更新是向后兼容的，可以平滑升级。而对于新用户，现在可以更自信地选择 Wouter 来满足各种路由需求，包括那些需要精细控制查询参数的复杂应用场景。