用途:本技能介绍如何使用 nuqs 在 React 中把状态存放到 URL 查询参数里,实现可分享的筛选、搜索和可深链的对话框。
主要能力:nuqs 底层使用 useSearchParams,因此需要 Suspense 边界;可用包装组件把边界与使用 nuqs 的组件放在一起,使调用方无需自行添加 Suspense。用 useQueryState 替代 useState 即可把状态同步到 URL,并支持多种解析器:parseAsString(字符串,如搜索)、parseAsBoolean(布尔,如开关)、parseAsArrayOf(parseAsString)(数组,如多选标签)。可配合 withDefault 设置默认值。
使用方式:将参数设为 null 可从 URL 移除该参数;使用 withDefault 时,设为 null 会清除 URL 中的参数但返回默认值。对话框可用 URL 参数控制可见性:读取如 delete 参数,存在则打开、关闭时置 null;按钮点击时写入对应 id 即可打开,形成形如 /items?delete=item-123 的深链。文档还给出了删除确认对话框和从按钮打开对话框的示例引用。
适用场景:搜索框、筛选器、开关、多选标签以及需要分享链接直接打开特定状态的对话框等。
限制:资料未说明具体安装命令、版本要求、收费情况或与其他状态库的对比;示例代码中的组件路径与类型仅为示意,未提供完整运行环境说明,缺失事实暂未提供。