用途:该技能用于把 React 状态同步到 URL 查询参数(基于 nuqs),从而构建可分享、可深链接的界面状态,例如筛选条件、搜索输入和对话框可见性。
主要能力:
- Suspense 包装:nuqs 读取 useSearchParams,需要 Suspense 边界。做法是导出一个公开包装组件,内部挂起客户端组件,使用方无需自行添加 Suspense。
- 解析器:用 useQueryState 配合解析器替代 useState,例如 parseAsString、parseAsBoolean、parseAsArrayOf,并用 .withDefault() 读取回退值同时保持 URL 干净。
- 清除参数:将值设为 null 即可从 URL 移除该参数;配合 .withDefault() 时参数被清除但读取返回默认值。
- 可深链接对话框:由 URL 参数驱动对话框可见性,使其可分享并支持前进/后退,同样用 Suspense 模式包装。通过设置参数即可从任意位置打开,例如 setDeleteId("item-123") 生成深链接 /items?delete=item-123。
使用方式:先完成 URL State with nuqs 前置设置。导出带 Suspense 的公开包装组件,内部客户端组件调用 useQueryState 与相应解析器,输入变化时调用 setter,清除时传 null。
适用场景:可分享的筛选、搜索、可深链接的对话框等需要将 UI 状态反映到 URL 的 React 应用。
限制:资料未提供安装命令、版本要求、收费信息及其他平台支持情况。