用途:把筛选、分页、选中标签页、打开的弹窗、排序等 UI 状态同步到 URL,使链接可分享、浏览器前进后退可用。假定项目已有路由器,不涉及基础路由搭建。
主要能力:区分 push 与 replace 的使用场景(用户显式导航用 push,筛选/排序等视图内变化用 replace);避免 URL 与本地 state 双源导致的重渲染循环,主张 URL 为唯一事实来源;处理默认值是否写入 URL 的两种约定;用 URL 控制弹窗开关;用可复用 hook 安全合并多个独立状态片段,避免互相覆盖;覆盖 React Router v6、Next.js App Router、Vue Router 与原生 history API 等场景;数组用重复键、对象用点号键序列化;对 URL 参数做类型校验与回退。
使用方式:先明确哪些状态入 URL、所用框架/路由器、是否可分享、默认值策略、是否与 store 冲突;再按模式实现。示例:React Router v6 用 useSearchParams,修改时展开已有参数并选择 replace;Next.js App Router 的 useSearchParams 只读,写入需用 useRouter 的 push/replace,且使用 useSearchParams 的组件需包在 Suspense 中。
适用场景:列表筛选、分页、标签页切换、可分享的弹窗链接、向导式多步页面等。
限制:资料未提供具体安装命令、依赖版本、收费或平台信息;示例基于 React Router v6 与 Next.js App Router,其他框架需自行适配;默认值策略需二选一并保持一致。